vue-router路由懶加載(記錄)

當打包構建應用時，JavaScript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

項目代碼

• 此次也是剛學到的一段代碼,方便項目管理 懶加載路由

目錄結構:

- router
   - index.js
   - router.js
複製代碼

• router.js : 路由信息文件

export default {
  '/': {
    path: 'components/aaa',
    name: 'aaa'
  },
  '/bbb': {
    path: 'components/bbb',
    name: 'bbb'
  },
  '/ccc': {
    path: 'components/ccc',
    name: 'ccc'
  },
  '/ddd': {
    path: 'components/ddd',
    name: 'ddd'
  },
  '/eee': {
    path: 'components/common/eee',
    name: 'eee'
  }
}
複製代碼

• index.js : 路由配置文件

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

Vue.use(Router)

function lazyLoad (path) {
  return resolve => require(['@/' + path + '.vue'], resolve)
}

let routers = []
for (let key in router) {
  if ({}.hasOwnProperty.call(router, key)) {
    let item = {}
    item.name = router[key].name
    item.path = key
    item.component = lazyLoad(router[key].path)
    routers.push(item)
  }
}
/** * 路由信息配置 */
export default new Router({
  mode: 'history',
  routes: routers
})
複製代碼