vue 路由(vue-router)懶加載的實作

1.要實作路由懶加載必須的先安裝插件

1. npm i babel-plugin-syntax-dynamic-import -D

2. 在 .bablerc 中引入 syntax-dynamic-import 插件
{
	"presets": ["env"],
	"plugins": ["syntax-dynamic-import"]
}

           

2.路由實作方式

2.1 未用懶加載

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

    Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })
           

2.2 實作懶加載

2.2.1 ES 提出的import方法，（------最常用------）

方法如下：const HelloWorld = （）=>import(‘需要加載的子產品位址’)

　　　　（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})
           

簡寫為：如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const otherRouter ={
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import("@/components/HelloWorld")
    }
  ]
}
           

2.2.2 vue異步元件實作懶加載

方法如下：component：resolve=>(require([‘需要加載的路由的位址’])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此處省去之前導入的HelloWorld子產品 */
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})
           

3.路由嵌套

export const otherRouter = {
	path: '/',
	name: 'otherRouter',
	redirect: '/login',
	component: Main,
	children: [{
			path: 'home',
			title: {
				i18n: 'home'
			},
			name: 'home_index',
			component: () => import('@/views/home/home.vue')
		},
		{
			path: 'priceTag',
			title: {
				i18n: 'priceTag'
			},
			name: 'priceTag',
			component: () => import('@/views/bsm/priceTag/priceTag.vue')
		}, 
	]
};