vue-cli3与路由懒加载的坑

本文讲述了在vue-cli3项目中遇到的路由懒加载问题,通过描述问题出现的现象,指出刷新动态路由导致的循环加载。作者通过查阅文档,发现问题与vue-cli3的prefetch设置有关,并提供了解决方案,即在vue.config.js中正确配置prefetch,以实现高效且无误的懒加载功能。
摘要由CSDN通过智能技术生成

当打包构建应用时,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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值