您好,登录后才能下订单哦!
小编给大家分享一下Vue项目中使用addRoutes出现问题怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
addRoutes官方介绍:
函数签名:
router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解决吧~
使用vue提供的addRoutes添加了动态路由以后,404页面的路由设置不在路由的末尾了
将404页面的路由添加到动态路由的末尾
代码如下(示例):
// xxx => 用户有的动态路由数组 xxx.push({ path: '*', redirect: '/404', hidden: true }) // 动态添加路由配置 router.addRoutes(xxx)
刷新时,动态路由没有加载完毕
路由添加完毕后,在进入页面
代码如下(示例):
if(用户的动态路由没有加载){ // 解决刷新出现的白屏bug next({ ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次) replace: true // 重进一次, 不保留重复历史 }) } else { next() }
路由设置是通过router.addRoutes(xxx)来添加的,退出时,并没有清空,再次登陆,又加了一次,所以有重复。
代码如下(示例):
// 重置路由 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // 重新设置路由的可匹配路径 }
这个方法就是将路由重新实例化,相当于换了一个新的路由,之前加的路由就不存在了,需要在登出的时候, 调用一下即可。
以上是“Vue项目中使用addRoutes出现问题怎么办”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。