vuerouter addRoutes,vue addroute
大家应该知道，添加路由的功能是可以通过vue-router提供的一个API来实现的。实际上是实现了用户的权利。本文主要介绍了在Vue项目中使用addRoutes时遇到的问题的解决方法。有需要的可以参考一下。
目录
前言
一、第404页
1.它出现的原因
2.解决方法
第二，刷新白屏
1.发生的原因
2.解决方法
第三，路线重复
1.发生的原因
2.解决方法
摘要
前言
AddRoutes官方介绍：
函数签名：
router . add routes(routes:ArrayRouteConfig)
动态添加更多路由规则。该参数必须是满足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. 解决方案
添加路线后，进入页面
代码如下(示例):
如果(用户的动态路由未加载){
//解决刷新中的白屏bug。
下一个({
的目的.到，//下一个({.to})是为了保证在进入页面之前添加路线(可以理解为重新进入)。
Replace: true //重新输入一次，不保留重复的历史记录。
})
}否则{
下一个()
}
三、路由重复
1. 出现原因
通过router.addRoutes(xxx)添加路由。当您退出时，它不会被清除。当你再次登录时，它被再次添加，所以有重复。
2. 解决方案
代码如下(示例):
//重置路由
导出函数resetRouter() {
const newRouter=createRouter()
router . matcher=newrouter.matcher//Reset路由的可匹配路径。
}
这个方法就是重新实例化路由，相当于换了一条新路由。先前添加的路线不存在。注销时需要调用它。
总结
关于在Vue项目中使用addRoutes问题的解决方案，本文到此为止。关于在Vue中使用addRoutes问题的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。