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
})
复制代码