vue报错:Loading chunk * failed,vue-router懒加载出错问题。

目录

    • [一、 出现场景](#一、 出现场景)
    • [二、 解决方案](#二、 解决方案)

一、 出现场景

菜单路由跳转时,有时页面会卡死,无法进行路由跳转

二、 解决方案

修改src目录下permission.js文件

js 复制代码
router.onError((error) => {
  const jsPattern = /Loading chunk (\S)+ failed/g
  const cssPattern = /Loading CSS chunk (\S)+ failed/g
  const isChunkLoadFailed = error.message.match(jsPattern || cssPattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed) {
    localStorage.setItem('targetPath', targetPath)
    window.location.reload()
  }
})

router.onReady(() => {
  const targetPath = localStorage.getItem('targetPath')
  const tryReload = localStorage.getItem('tryReload')
  if (targetPath) {
    localStorage.removeItem('targetPath')
    if (!tryReload) {
      router.replace(targetPath)
      localStorage.setItem('tryReload', true)
    } else {
      localStorage.removeItem('tryReload')
    }
  }
})
相关推荐
gc_229914 小时前
Vue框架学习(1:环境搭建)
vue.js
原则猫15 小时前
UDP 到底怎么实现可靠的
前端
Java后端的Ai之路15 小时前
14、ReactJS - 路由(Router)
前端·react.js·状态模式
持敬chijing15 小时前
白盒测试与代码审计-js登录逆向实战
javascript·网络·安全·web安全·网络安全·网络攻击模型
优选资源分享16 小时前
PicGo v3.0.3 新版 | 开源免费图床工具
javascript·笔记·electron
裕晟资质规划17 小时前
三类涉密资质延续时限差异分析:军工60日与集成印制3个月的边界
java·服务器·前端·网络·安全
ShineWinsu17 小时前
对于JavaScript:JavaScript基础语法的解析
开发语言·前端·javascript·面试·web·基础语法·循环
月夏17 小时前
Vue3 转 React:18 项对照表 + 5 个必踩的坑(附 7 天上手路线)
前端
广州华水科技17 小时前
单北斗GNSS位移监测系统的应用与维护解析
前端
普通人617 小时前
php+html+canvas实现树状打开的结构
开发语言·javascript·html5·1024程序员节