TOMMYHU

1. vue-router懒加载定义
当路由被访问的时候才加载对应组件

2. vue-router懒加载作用
当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。

3. vue-router懒加载实现
第一种写法
const routers = [     {         path: '/',         name: 'index',         component: (resolve) => require(['./views/index.vue'], resolve)     } ]

第二种写法
const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index') const routers = [     {         path: '/',         name: 'index',         component: Index     } ]
第三种写法
const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home'); const routers = [     {         path: '/',         name: 'index',         component: Index     } ]
备注
‘@/’ 和 ‘./’有异曲同工之用 ‘.vue’后缀可省略 ‘group-home’ 是把组件按组分块打包, 可以将多个组件放入这个组中
▲返回顶部