vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案
更新时间：2023年10月08日 11:17:15 作者：木木子子水水心心
我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面,这说明没有找到指定路由才跳到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中使用$http.post请求传参的错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue中的同步和异步调用顺序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue + element动态多表头与动态插槽，下面文章围绕vue + element动态多表头与动态插槽的相关资料展开文章的内容，具有一定的参考价值，需要的小伙伴可以参考一下，希望对大家有所帮助2021-12-12
这篇文章主要介绍了vue cli4.0项目引入typescript的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了vue-cli3 DllPlugin 提取公用库 ,需要的朋友可以参考下2019-04-04
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点，对此有需要的朋友们学习下天。2019-02-02
这篇文章主要介绍了vue导入新工程 “node_modules依赖”问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
随着现在vue3越来越普及，相应的面试题也多了起来。说到vue3的面试题，有一个最经典的就是对于实现ref和reactive这两个方法的底层原理，本文就来和大家简单讲讲吧2023-04-04
递归 简单来讲就是程序自己调用自身,vue中的递归组件就是,组件自身调用自身,下面这篇文章主要给大家介绍了关于Vue3递归组件的用法,需要的朋友可以参考下2022-03-03
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下2023-01-01
最新评论