vue-router懒加载

原创
2018/07/19 23:32
阅读数 903

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’ 是把组件按组分块打包, 可以将多个组件放入这个组中
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部