vue addRoutes动态添加路由后，切换帐号，重新添加路由

最新推荐文章于 2025-05-21 14:37:41 发布
最新推荐文章于 2025-05-21 14:37:41 发布
阅读量724 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rayshaan0123/article/details/120541385
版权
在项目后台开发中，遇到了登录后切换账号时路由未更新的问题。问题出现在动态添加路由的逻辑上，当用户从login.vue页面登录后，权限分配未能正确切换。解决方案在于确保每次登录或切换账户时，正确刷新并根据新账户权限动态生成对应的路由。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目后台需要权限分配，做好之后发现切换帐号的话还是之前的路由，并没有重新添加
解决方法：
login.vue页面(动态添加路由的上一个页面)
在这里插入图片描述

Vue 如何清空已注册路由再按需重新注册
Sandy_zhi的博客
11-24 1624
希望可以不断接受开发上的挑战 ，然后不断的进行技术精进。 上面的图片大概是项目的一个portal 页 ，就是登陆后先来到portal 页面，根据当前用户的角色权限，显示当前赋予权限的系统，可能有一个系统，可能有两个系统，也可能没有任何权限。另外项目中的路由权限也是依据后台给前端的数据，因此对应的路由的注册，也是如果当前用户有这个系统的权限，根据系统管理的配置也可以配置到某个菜单的权限，服务端将当前用户的菜单权限给到前端，前端再进行动态的注册，这个的核心就是addRoute,关于去重等，不做详细的说.
vue addRoutes路由动态加载操作
10-14
Vue.js的路由管理库`vue-router`允许开发者在运行时动态添加路由，这对于实现权限控制、根据用户角色展示不同路由非常有用。`addRoutes`方法就是动态加载路由的关键，它使得我们可以在应用启动后或者某些特定事件...
vue动态路由切换用户，登录后还显示之前用户的路由
liuxi_happy的博客
05-30 2264
// 第一种可能，你在退出登录的时候没有清空 vuex中的路由，在退出的方法中添加 logout() { // SET_ROUTERS 这个字段是你在vuex中自己定义的字段 this.$store.commit("SET_ROUTERS", ""); this.$router.push('/login') }, // 第二种可能，你防止vuex刷新数据丢失，你在本地又存了一次，你在退出的方法中添加 logout() { // SET_ROUTERS 这个字段是你
vue动态路由+静态路由+用户切换重置路由。
weixin_40869947的博客
03-16 1万+
最近做项目，遇到了动态路由权限问题，看了一些文章，踩了两天坑，算是实现了。和大家分享一下，有错误的地方请大神指出来。目前没有接口，我采用的vuex存储用户名信息来获取配置的路由js。 1、我们先看一下我的路由目录，如下： 1.1、_import_development.js;这个是开发环境引入组件的方式，代码如下： 这里的路径按照自己的代码存放获取。（我的组件存放是按照路由分...
vue router控制页面权限，切换账号出现router权限还是上一个登录人的
RubyLinT的博客
05-14 1334
解决办法再退出方法里加上： this.$router.replace(`/login?redirect=${this.$route.fullPath}`) location.reload();//重新加载
vue-router的实现原理_你可能不清楚的 Vue Router用法
weixin_39995297的博客
11-24 247
Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。路由元信息用途(1)验证用户身份，定义用户权限能访问的页面大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。(登录)验证身份方法：1...
Vue3---Vue3项目切换(设置)路由模式
kxbkk的博客
07-07 1423
解决用vue3项目npm run build 之后dist文件打开出现空白问题。 hash模式：在路由index.js文件中导入 createWebHashHistory import {createRouter,createWebHashHistory} from 'vue-router' 在路由index.js文件中导入注册使用createWebHashHistory const router = createRouter({ history: createWebHas..
vue3重置路由
qq_58061710的博客
07-17 2975
在router3中使用matcher重置路由匹配器来重置路由, 但在router4, 即与v3匹配的路由版本中, 打印router时, 不存在matcher属性的, 这里使用getRouter和removeRouter重置。
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
10-17
因此，为了确保动态路由的正确性和安全性，我们需要在每次用户切换路由时重新请求接口，根据返回的权限信息动态过滤和添加路由。虽然这会导致一定的性能损失，但相比可能出现的安全问题和功能失效，这是更为稳妥的...
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
这个方法允许我们在 Vue Router 实例创建后，即程序运行时动态添加新的路由。在用户登录成功后，我们可以从服务器获取用户的角色和对应的菜单权限，然后基于这些信息生成新的路由规则，并使用 `addRoutes` 添加到...
解决vue addRoutes不生效问题
10-14
- **动态添加路由**：在Vue应用中，我们可以在运行时根据需求动态添加路由，这通常发生在用户权限确定后，比如在登录成功时。 - **路由冲突**：当两个或多个路由定义有相同的路径或组件时，会出现路由冲突，这可能...
vue路由结构可设一层方便动态添加路由操作
10-14
在Vue.js应用中，路由是页面跳转和组件切换的核心机制。Vue Router是官方推荐的路由库，它允许我们定义和管理应用的导航流程。在实际项目开发中，特别是大型应用，路由配置往往需要根据权限或者用户行为进行动态调整...
vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决
c_Janz的博客
11-05 3509
起因 在当前项目中使用的iview-admin,路由要根据权限动态生成，是在登录后获取当前用户权限内的路由使用 vue-router 的 addRoutes() 方法动态添加到路由表中 遇到的问题 项目目录 ... router index.js // 路由主配置，路由守卫等 routers.js // 存放页面整体布局和无需权限的路由 store modules ...
vue中重置路由到某一个页面
wei80231996的博客
04-20 563
在路由文件夹下面 router 文件下 const routes = [ { path: '/', redirect: '/home',//重置页面到home页面 }, { path: '/home', meta: { name: "个人中心", }, component: () => import("@views/Home.vue") }, ]
vue3 如果切换角色后权限不同 怎么清空之前添加动态路由。
qq_34093387的博客
08-15 2386
然后尝试了了用removeRoute()的方法来移出路由，发现会将所有home以及home的所有子路由都删除掉，而我们想要达到的效果是，删除除了home还有home名叫wecolme的子路由以外的所有路由，所以这个removeRoute API并不适合（当然你可以先删除再新增路由，只是显得代码有点臃肿），继续寻找方法；其实可以看到，这4个路由是基本的路由，其他都是我们动态添加路由，那我们需要做的其实就是在退出登录的时候，将所有的路由恢复到这个初始化状态；以下是代码router里面的代码。
vue router动态添加路由，退出登录重复问题
m0_55967670的博客
07-31 425
vue-router
vue重修之路由【下】
缘友一世的博客
10-23 276
方式适用场景优点示例查询参数传参传递多个参数时较为方便灵活，可以传递多个参数易于构建和理解URL不限于特定路由配置3. 适用于非动态路由情况动态路由传参传递单个参数时优雅简洁清晰明了，路由中直接体现参数1. 配置：path: “/path/:param”易于维护和理解路由结构利于定义必要参数的路由更有助于RESTful路由设计4. 适用于资源标识和特定路由参数的传递查询参数传参在需要传递多个参数或者不依赖路由结构时更为灵活。
vue-router实现根据用户权限显示不同菜单-动态路由
热门推荐
weixin_42349568的博客
01-29 1万+
一，情景再现 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下： import Vue from 'vue' import VueRouter from 'vue-router' import s
使用 Vue 展示 Markdown 文本
最新发布
bulucc的博客
05-21 201
这种方法可以直接渲染 Markdown 文本，但是不支持语法高亮和其他高级功能。这种方法支持语法高亮和其他高级功能，并且不需要引入 marked 库。这种方法支持语法高亮和其他高级功能，但是需要引入 prismjs 库。这种方法支持语法高亮和其他高级功能，但是需要引入 marked 库。
vue-router权限控制实践与动态添加路由
然后，利用vue-router的全局前置守卫`beforeEach`，在每次路由切换时进行匹配判断。通过`to.meta`获取目标路由的元信息，判断是否匹配到有效的路由。 2. 登录访问控制： 实际项目中，通常需要区分哪些路由需要登录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值