vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案
在做vue项目时需要使用后端给的路由权限，处理路由动态添加到路由上，几经查找在 vue-Router中有个router.addRoutes 的方法。
官方使用方法及说明 点我
router.addRoutes 函数签名： router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
遇到的问题：
我自己使用addRoutes动态添加的路由页面，使用router-link标签可以跳转，但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面。这说明没有找到指定路由才跳到404路由的。
我的默认路由是这样子的(这是还没处理后端路由的公共路由也就是谁都有的路由):
在使用addRoutes之前我就定义了，通配符 * 跳转到404页面如下图： 这就是问题所在。
解决方法是 不要再路由中添加404页面 在addRoutes里进行拼接 (通配符 * 跳转到404页面的路由)(也就是动态添加红色框中的内容)
下边有详细代码：
在beforeEach中打印 to发现是404 打印from显示是/
这样子更可以确定 当页面一刷新 addRoutes 还没有添加上 路由就开始跳转了 所以找不到路由就跳转到404页面了。
在网上找了许久发现是 不能在自己写的路由里边添加404 要在addRoutes中添加404页面不然就会跳转404 所以我把代码改成下面这个样子 最后添加路由的 通配符 * 跳转404 页面果然好了
到此这篇关于vue 使用addRoutes动态添加路由 刷新页面跳转404路由的问题的文章就介绍到这了,更多相关vue 使用addRoutes动态添加路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue使用antd组件a-form-model实现数据连续添加功能
这篇文章主要介绍了Vue使用antd组件a-form-model实现数据连续添加功能,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法
本文主要介绍了vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
ant-design-vue Table pagination分页实现全过程
这篇文章主要介绍了ant-design-vue Table pagination分页实现全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue类名如何获取动态生成的元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章介绍了Vue路由vue-router的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动,这篇文章主要介绍了vue顶部消息横向滚动通知,需要的朋友可以参考下2024-02-02
vue-router是vue.js官方给出的路由解决方案，能够轻松的管理SPA项目中组件的切换，这篇文章主要介绍了Vue3 中路由Vue Router 的使用,需要的朋友可以参考下2023-02-02
Vue.js目前已经更新到2.x，功能和语法上有一定升级和修改，本文首先介绍基础内容。感兴趣的朋友一起看看吧2017-10-10
这篇文章主要为大家详细介绍了vue实现移动滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
最新评论