正常引入方式：
// 導入Vue import Vue from 'vue' // 導入路由 import Router from 'vue-router' // 導入登錄組件 import Login from '@/components/login/Login' // 導入Home組件 import Home from '@/components/home/Home' // 安裝路由插件 Vue.use(Router) // 創建路由對象，配置路由規則 const router = new Router({ routers: [ { path: '/login', component: Login }, { path: '/home', component: Home }, ] }) 1 vue異步組件技術
在大型應用中，我們可能需要將應用分割成小一些的代碼塊，並且只在需要的時候才從服務器加載一個模塊。為了簡化，Vue 允許你以一個工廠函數的方式定義你的組件，這個工廠函數會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數，且會把結果緩存起來供未來重渲染
相關代碼：
const router = new Router({ routers: [ { path: '/login', component: (resolve) => { require(['@/components/login/Login'], resolve)} }, { path: '/home', component: (resolve) => { require(['@/components/home/Home'], resolve)} } ] }) 2 路由懶加載（官方：把組件按組分塊）
每個 () => import() 都會生成一個獨立的JS文件
也就是說：只要使用這個語法，就是告訴 webpack 這就是一個代碼分割點，這樣生成一個獨立的js文件，來實現按需加載的功能
相關代碼：
// 無需import導入組件 const Login = () => import(/* webpackChunkName: 'login' */ '@/components/login/Login') const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home') // 創建路由對象，配置路由規則 const router = new Router({ routers: [ { path: '/login', component: Login }, { path: '/home', component: Home }, ] }) 說明：webpackChunkName 相同，那么，這兩個組件會被打包生產一個JS文件
const Goods = () => import(/* webpackChunkName: 'goods' */'@/components/goods') const GoodsAdd = () => import(/* webpackChunkName: 'goods' */'@/components/goods-add') 3 webpack提供的require.ensure()
require.ensure（）的語法：
require.ensure（dependencies：String []，callback：function（require），errorCallback：function（error），chunkName：String）
const router = new Router({ routers: [ { path: '/login', component: r => require.ensure([], () => r(require('@/components/login/Login')), 'login') }, { path: '/home', component: r => require.ensure([], () => r(require('@/components/home/Home')), 'home') }, ] })