vue router动态添加路由，退出登录重复问题

于 2024-07-31 19:12:07 发布
阅读量202 收藏
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55967670/article/details/140830446
版权

背景：当退出登录时，router.push(‘/login’)此时并没有页面没有刷新，只是删除token等用户登录时存储的信息，vue实例上挂载的vue-router的路由表，并没有重置，所以上次登录之后用addRoutes方法添加的路由没有删除掉，自然会出现第二次去添加的时候重复的问题

解决办法：退出登录时候用 location.reload(); （能解决的原因就是刷新页面之后所有的vue实例上的变量都重置了，包括路由）

@ 前端小白
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue路由动态添加重复警告重复
似月是你
11-11 860
vue路由动态添加重复警告重复
Vue动态路由路径重复以及刷新丢失页面问题
wy17324808055的博客
11-29 6445
1.使用router.addRoutes(teacherRouter);添加完路由切换路由时，vue会警告路由名字重复 问题出现原因是：动态路由添加时调佣addRoutes();它只会帮你注入路由，不会帮你把前面的路由清掉。如此一来就重复添加了。 解决方法：路由动态添加关键页面需要在路由配置页（router/index.js）添加自定义方法 router.$addRoutes = params => { router.matcher = new Router({ routes
vue-router 动态添加路由，二次添加遇到的问题
老君的博客
03-13 1449
@[TOC] 修改记录 vue-router 动态添加路由，二次添加遇到的问题 问题： 因为路由根据登录角色获取的路由信息，如果退出后再次登录则需要重新获取路由信息 因为addRoutes 给路由表中添加路由，导致有些路由信息重复报警告：Duplicate named routes definition 解决： // constantRoutes是公共路由，如下： export const constantRoutes = [{ path: '/redirect', component: Layou
vue 解决addRoutes多次添加路由重复的操作
10-14
主要介绍了vue 解决addRoutes多次添加路由重复的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE添加动态路由，退出重新登录后页面报提示：路由重复 [vue-router] Duplicate named routes definition: {
shiningchen322的博客
11-21 1029
VUE添加动态路由，退出重新登录后页面报提示：路由重复 [vue-router] Duplicate named routes definition: {
解决动态添加路由 出现重复路由问题
weixin_51508523的博客
05-05 2993
在做后台管理项目时，需要根据用户权限动态添加路由，但退出登录账号1，登录账号2时， Duplicate named routes definition这样的警告。问题是路由重复定义了，需要解决
vue重复路由_vue后台管理系统，动态添加路由，路由重复
weixin_39517054的博客
01-14 202
使用vue-router的addRoutes动态添加路由时，子路由重复了。点击‘职工类型’，路由地址变为‘http://localhost:8123/#/workerType’，显示的却是‘职工列表’点击‘职工列表’，路由地址变为‘http://localhost:8123/#/workerList’，显示的还是‘职工列表’点击‘学生类型’，路由地址变为‘http://localhost:8123...
vue-router beforeEach跳转路由验证用户登录状态
10-17
主要介绍了vue-router beforeEach跳转路由验证用户登录状态,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-router之解决addRoutes使用遇到的坑
10-15
当再次调用`addRoutes`添加新的权限路由时，由于新的路由可能包含与之前动态添加的路由相同的名字，Vue Router检测到这些重复的命名，从而触发了警告。 解决这个问题的方法有几种： 1. **刷新页面**：在用户退出...
vue系列之动态路由详解【原创】
08-29
本文将深入探讨Vue.js中的动态路由机制，并提供一个基于Vue.js的单点登录系统的解决方案。 一、设想 在讨论动态路由之前，我们首先需要了解一个基本的单系统解决方案。该解决方案包括以下几个步骤： 1. 前端从...
vue中解决动态路由加载，刷新页面出现路由重复添加/出现空白页的问题
hahaha_1314的博客
03-25 8930
vue动态路由刷新页面后出现问题的处理
vue 动态路由匹配 URL路径重复追加
weixin_40769819的博客
07-08 1608
问题：点击<router-link>标签，页面url地址不断在原来url地址上追加，无法跳转 代码 <router-link to="user/001">USer001</router-link> <br> <router-link to="user/002">USer002</router-link> 解决： <router-link to="/user/001">USer001</rou
vue router 动态路由清除方式，resetRouter不起作用
G佳伟
06-10 1576
背景：vue项目使用vue router退出登录后路由没有被清除官方给到的resetRouter内初始化的matcher替换当前router的matcher不起作用。
vue vue-router 路由配置问题, 重复路由
热门推荐
又是再见?
09-19 1万+
今天被这个问题坑了两个小时, 还是自己排错能力不够啊!! router 中写有这么两个配置, /resume/new 这个是新加的, 怪了, 咋改组件内容页面上都不变, 重启项目, 更新浏览器都没解决, 最终和同事一起 review 的时候仔细看了下这块, 一下就发现问题了, /resume/new 也会跳转到 /resume/:id 去, 修改 add.vue 页面当然不会变了; 之前也...
如何解决vite+vue3路由重复编写代码问题，提升舒适度？
类人猿
04-09 299
vue-route4.x，vite5.x，vue3.x，类似react-umijs
vue vue3 vue-router4清除动态路由
weixin_44113950的博客
03-27 1097
动态路由清除
vue动态路由切换用户，登录后还显示之前用户的路由
liuxi_happy的博客
05-30 2027
// 第一种可能，你在退出登录的时候没有清空 vuex中的路由，在退出的方法中添加 logout() { // SET_ROUTERS 这个字段是你在vuex中自己定义的字段 this.$store.commit("SET_ROUTERS", ""); this.$router.push('/login') }, // 第二种可能，你防止vuex刷新数据丢失，你在本地又存了一次，你在退出的方法中添加 logout() { // SET_ROUTERS 这个字段是你
vue3加载动态路由出现的问题解决
最新发布
A15029296293的博客
05-30 445
寻找了很多方法，最后明白了应该是npm run build 打包后，代码按照上面的import导入就无法找到组件路径，所以需要换一种引入方法。打印modules可以看到返回了views文件夹下的所有路径，通过遍历这个路径和后端拿到的数据路径，过滤出最后的动态路由。最近遇到了动态加载路由的问题，在开发环境下动态路由正常，打包后部署到服务器后，动态路由无法访问，一直报错。写一个for循环遍历方法，遍历后台返回的数据，并且遍历modules获取到对应的path并返回。
vue3 退出登陆清空动态路由
08-31
首先，我们需要在退出登录的方法中添加代码以清空动态路由。可以在退出登录的方法中使用`router`对象的`matcher`属性获取已注册的动态路由列表，然后通过使用`router`对象的`removeRoute`方法逐个删除这些动态路由。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值