vue: 路由报错后的处理方式（通常用在打包发布后的报错）

        用户在发包前进入了页面（也就是请求到了 index.html ），并且在 index.html 中可以得知将来要请求的异步组件的名字叫 a.js ，当服务器这时候发包，并且清空掉了 a.js 这个资源，改名叫 a1.js 。发包之后用户点击 a.js 对应的组件时，浏览器拿着先前在 index.html 得知的 a.js 这个名字去服务器请求资源就得到了以上的 Loading Chunk Failed 报错。

/* 正则使用'\S'而不是'\d' 为了适配写魔法注释的朋友，写'\d'遇到魔法注释就匹配不成功了。

  * 使用reload方法而不是replace原因是replace还是去请求之前的js文件，会导致循环报错。
  * reload会刷新页面， 请求最新的index.html以及最新的js路径。
  * 直接修改location.href或使用location.assign或location.replace，和router.replace同理， 
  * 在当前场景中请求的依然是原来的js文件，区别仅有浏览器的历史栈。因此必须采用reload.
  */
router.onError(error => {
  const jspattern = /Loading chunk (\d)+ 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) {
    window.localstorage.setItem('targetpath', targetpath)
    window.location.reload()
  }
})

 

__EOF__

本文作者：wjs0509
本文链接：https://www.cnblogs.com/wjs0509/p/17282628.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！