当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。所以就要用到懒加载了
懒加载可以说是我经常用的了哈哈哈哈
于是最近在用vue-cli3做项目的时候就入坑了,虽然不习惯,但是vue-cli3相比之前更加灵活了!
言归正传,下边开始踩坑…
export const asyncRouterMap = [
{
path: '/about',
name: 'about',
meta: {
// 标记需要登录
auth: true,
role: ['admin', 'user', 'superadmin']
},
component: () => import('./views/About.vue')
},
{ path: '*', redirect: '/404', hidden: true }
]
按照这种方式写会发现刷新动态路由页面之后陷入了循环
此时此刻女生的第六感告诉我,肯定是vue-cli3的问题,于是开始刷文档(哈哈哈有问题就刷文档)
最后终于让我找到了问题所在,看下图
chainWebpack: config => {
// 修改prefetch:
config.plu