关于我们使用addRoutes会遇到的bug(404/白屏)

42 篇文章 1 订阅
26 篇文章 0 订阅

写在前面

        当我们在做权限管理模块的时候,会用到动态路由,而使用动态路由就难免会遇到两个bug:

        1.如果我们刷新浏览器,会发现跳到了404页面

        2.对于addRoute添加的路由,在刷新时会白屏

        下文将讲解如何修复这两个bug。

1、刷新页面跳转到404页面

        造成这个bug的主要原因是因为我们在路由设置的时候可能把404页面放在了中间位置而不是所有路由的最末尾。

        解决方法就是把404页改到路由配置的最末尾就可以了,因为大家的项目内容各不相同,再次就不举例赘述了。

2、解决刷新出现的白屏bug

        对于这个bug,vue官方给予了修复的代码,贴在下面:

if (条件) {
  // 省略其他...
  
  
  // 解决刷新出现的白屏bug
  next({
    ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
    replace: true // 重进一次, 不保留重复历史
  })
} else {
  next()
}

写在最后

        以上就是今天的所有内容啦,下期见。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值