vue 使用addRoutes动态添加路由 跳转404路由的问题

已于 2022-08-11 16:33:02 修改
阅读量5.2k 收藏 7
点赞数 2
文章标签： javascript vue.js es6
于 2020-10-27 16:03:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38287682/article/details/109312903
版权

遇到的问题：
我自己使用addRoutes动态添加的路由页面，使用router-link标签可以跳转，但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面。这说明没有找到指定路由才跳到404路由的。

我的默认路由是这样子的(这是还没处理后端路由的公共路由也就是谁都有的路由):
在使用addRoutes之前我就定义了，通配符 * 跳转到404页面如下图： 这就是问题所在。
解决方法是 不要再路由中添加404页面 在addRoutes里进行拼接 (通配符 * 跳转到404页面的路由)(也就是动态添加红色框中的内容)
在这里插入图片描述
在这里插入图片描述
因为在routeradd之前路由就已经进行了跳转，所以路由自动不会匹配到search页面，而是直接匹配到了404页面，所以我们只需要在addrouter的时候或者之后再添加404页面，让404页面一开始不要存在于初始化的路由数组内即可，如下图：
在这里插入图片描述
在这里插入图片描述

@lauyu
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
vue-router 4.0 动态路由会跳转到 404 页面的问题
纯爱枫若情的博客
07-10 7257
当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。
vue-router 路由跳转、带参动态路由匹配、404路由和嵌套路由
g841805的博客
03-19 1136
核心代码全部代码常量路由home.vueabout.vueabout1.vue效果homeaboutabout1404。
vue中 router.addRoute()动态添加路由,刷新页面404
最新发布
weixin_55254452的博客
06-20 570
第一部坑：router.addRoute()后的路由，router.options.routes是获取不到最新路由的，误导我一直认为添加路由失败，添加不进去，其实已经存在了！很多项目都会写404 但是！404不能写在静态路由中，因为匹配动态路由时会直接进入404，就算你成功添加了动态路由，因为顺序 直接进入了404。第二部坑：在路由守卫中，错误的next()会导致循环调用导致内存溢出，所以要合理的正确的写判断条件和next(), 为此我研究了很久next()第三个坑：那就是404。
vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法
laosao_66的博客
04-22 2460
在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。
vue页面跳转报404
weixin_40444253的博客
06-06 834
vue页面跳转报404
Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
10-26
Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
vue-router 指定向 动态路由 正则 匹配404
qq_36529240的博客
04-29 1123
设置指定向 动态路由 正则 匹配404。index.js 代码。
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
在 Vue 项目中，我们经常需要使用 addRoutes 动态添加路由，但是在刷新页面后，这些动态添加的路由就会失效。下面我们来介绍如何解决这个问题。 应用场景 在某些场景下，我们需要利用 addRoutes 动态添加路由，...
vue用addRoutes实现动态路由的示例
08-29
在之前的文章中，我们讨论了基于 Vue 实现后台系统权限控制的思路，但是在每次路由跳转的 before 钩子里做判断的方法不太"优雅"。幸运的是，vue-router 2.2 版本新增了一个 router.addRoutes(routes) 方法，让动态...
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
12-01
在我不知道vue的路由还可以通过addRoutes动态添加时，我只知道vue的路由都是写死在路由表中的，每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-...
vue 动态路由刷新失效及404页面处理
Gao_wbe的博客
02-12 6877
vue动态路由时会遇到一些坑，这里总结一下，并提供解决思路。
VueRouter4 - 动态路由刷新变空白或404
小熊
10-31 3240
本文章基于Vue3+VueRouter4，介绍了如何解决动态路由刷新变空白或者404！
Vue3 动态添加路由刷新后出现404解决方案
weixin_43169949的博客
06-05 362
vue3 动态添加路由，刷新页面后出现404的完美解决方案
Vue3实现当访问的路由不存在时跳转到404页面的方法详解
李长渊的博客
06-03 882
Vue3实现当访问的路由不存在时跳转到404页面的方法详解
vue项目系统内路由无权限跳转404改为跳转401
吴小花的博客
06-26 1622
401页面需要在权限配置里进行配置才能访问这个401无权限页签。这样很麻烦，需要对每个角色进行这个页面的权限配置。在路由跳转404的时候进行调接口判断。如果返回true .则跳转401页面，如果false,继续跳转404.这里处理思路是在前端动态生成路由的过程将401页面的配置添加进去。这样不用系统进行额外配置这个页面的权限了。这里需要后端提供个接口，传当前路由，如果是系统内路由接口返回true，如果不是返回false.这里注意参数不需要传给后端， to.redirectedFrom 是从哪个路由进来的。
解决vue项目路径不正确，自动跳转404
weixin_49343253的博客
08-14 1万+
第一种方法：使用vuerouter钩子函数beforeEach，每次进行路由跳转时都进行判断，若页面不存在就跳转到404页面。 import Error from ' ' const router = new Router({ routes:[ name: 'error', path: '/error', component: Error ] } //beforeEach每次进行路由跳转时都会执行 router.beforeEach..
vue-router路径路径正确，页面却显示404
qq_38502227的博客
06-20 5605
是router ----->index.js 中path 路径由path: "/ChartContainer"改成path: "/Line/ChartContainer", .vue文件中添加name 属性 除去上面的方法，还有一个原因就是文件命名的问题，例如：像table.vue文件就不行，改成其他的名如tableDemo.vue就可以 ...
利用addRoutes添加动态路由，刷新页面跳转404或者空白页
zhou_mu_mu_xi的博客
08-26 1817
刷新页面时跳转404或者空白页，我的原因是刷新页面后动态添加的路由表信息丢失，我在获取到后存在了sessionStorage中，但在刷新后还是丢失， 解决办法：在判断页面是刷新时，重新拉取数据 路由表信息 path: '/Dep', name: 'Dep', icon: 'el-icon-location', component: Layout, redirect: '/department', meta: { requireAuth: true,
vue配置动态路由跳转报404页面解决方案，3个步骤实现，1分钟解决
热门推荐
凌晨冲锋者的博客
11-17 1万+
问题： 我们成功配置动态路由，点导航栏没问题，一刷新和输入地址 就出问题跳404页面！ 原因： addRoutes动态添加路由还没完成，页面就从静态找了。 路由生命周期 静态→动态，404是放到静态的所有老报。 解决： 将404路由也动态添加进去！ 演示： 这是我报bug的样子 咱们把404路由删了，用一个变量代替 操作步骤一： 操作步骤二： 操作步骤三： 在APP使用created()函数是为了刷新时候调用第二个步骤的方法。 ...
vue3 路由跳转404
09-16
在Vue 3中，路由跳转遇到404错误的情况可以通过以下方式处理。首先，需要在路由配置中定义一个404页面，用于显示路由未匹配到的情况。可以使用`<router-view/>`标签在主组件中渲染404页面。另外，还可以通过路由导航守卫的`beforeEach`方法来判断路由是否存在，如果不存在则跳转到404页面。 代码示例： ```javascript // 路由配置 const routes = [ // 其他路由配置... { path: '/404', name: '404', component: () => import('../views/NotFound.vue') }, { path: '/:catchAll(.*)', redirect: '/404' } ]; // 路由实例化 const router = createRouter({ history: createWebHistory(), routes }); // 路由导航守卫 router.beforeEach((to, from, next) => { if (to.matched.length === 0) { next('/404'); } else { next(); } }); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@lauyu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值