vue-router懒加载

1. vue-router懒加载定义

当路由被访问的时候才加载对应组件

2. vue-router懒加载作用

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

3. vue-router懒加载实现

1. 第一种写法

const routers = [    {        path: '/',        name: 'index',        component: (resolve) => require(['./views/index.vue'], resolve)    }]

1. 第二种写法

const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index')const routers = [    {        path: '/',        name: 'index',        component: Index    }]

1. 第三种写法

const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');const routers = [    {        path: '/',        name: 'index',        component: Index    }]

备注

• ‘@/’ 和 ‘./’有异曲同工之用
• ‘.vue’后缀可省略
• ‘group-home’ 是把组件按组分块打包, 可以将多个组件放入这个组中