目录
前言
addRoutes官方介绍：
函数签名：
router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
这两天做vue后台权限管理系统的时候，发现使用vue提供的addRoute添加路由以后，会出现两个bug，一起来看看如何解决吧~
一、404页面
1. 出现的原因
使用vue提供的addRoutes添加了动态路由以后，404页面的路由设置不在路由的末尾了
2. 解决方案
将404页面的路由添加到动态路由的末尾
代码如下（示例）：
// xxx => 用户有的动态路由数组
xxx.push({ path: '*', redirect: '/404', hidden: true })
// 动态添加路由配置
router.addRoutes(xxx)
二、刷新白屏
1. 出现原因
刷新时，动态路由没有加载完毕
2. 解决方案
路由添加完毕后，在进入页面
代码如下（示例）：
if(用户的动态路由没有加载){
// 解决刷新出现的白屏bug
next({
...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
replace: true // 重进一次, 不保留重复历史
})
} else {
next()
}
三、路由重复
1. 出现原因
路由设置是通过router.addRoutes(xxx)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。
2. 解决方案
代码如下（示例）：
// 重置路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}
这个方法就是将路由重新实例化，相当于换了一个新的路由，之前加的路由就不存在了，需要在登出的时候， 调用一下即可。
总结
到此这篇关于Vue项目中使用addRoutes出现问题解决的文章就介绍到这了,更多相关Vue使用addRoutes的问题内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！
您可能感兴趣的文章:
- vue 解决addRoutes动态添加路由后刷新失效问题
- vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
- vue addRoutes实现动态权限路由菜单的示例
- vue用addRoutes实现动态路由的示例
- 解决vue addRoutes不生效问题
- vue 解决addRoutes多次添加路由重复的操作
- vue addRoutes路由动态加载操作
本文由 华域联盟 原创撰写：华域联盟 » Vue项目中使用addRoutes出现问题的解决方法
转载请保留出处和原文链接：https://www.cnhackhy.com/80592.htm
