vue使用addRoutes()方法后，this.$router.options.routes未更新

最新推荐文章于 2024-06-20 15:16:10 发布
转载 最新推荐文章于 2024-06-20 15:16:10 发布 · 6.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
原文链接：https://www.cnblogs.com/blueroses/p/7767285.html

本文探讨了在Vue中实现动态路由的过程，特别是在主页菜单渲染时遇到的问题：使用this.$router.options.routes获取的菜单仍为默认设置。文章分享了解决方案，帮助读者理解如何正确配置和使用动态路由。

背景

最近在搞vue的动态路由，在路由守卫中添加了获取菜单的方法，并添加进了router，但是在主页进行渲染时，this.$router.options.routes方法获取出的结果依旧是默认的几个菜单

解决

解决方案地址

SimpleCow
关注
vue 动态侧边栏菜单不更新问题（退出重登录管理员还是看到普通用户的菜单列表）
game_shader
10-24 1868
问题描述：登录普通账号；退出登录；登录管理员账号；主界面侧边栏看到的还是普通用户的功能列表； 期望：能看到管理员的功能列表； 问题原因：动态加载菜单的时候，过滤菜单时修改了基础菜单集合数据，用的是浅拷贝。 解决方案：改为深拷贝，可用序列号和解析来简单实现 问题跟进：改为深拷贝会引入新的问题，加载子菜单组件失败 新问题-解决方案：退出时，强制刷新整个界面 async logout() ...
解决vue addRoutes不生效问题
10-14
router.addRoutes(routes) // 添加动态路由 ``` 通过这种方法，每次登录时都会创建一个新的路由匹配器，避免了因为重复添加路由而导致的冲突问题。 **补充知识：** - **动态添加路由**：在Vue应用中，我们可以在...
在addroutes后，$router.options.routes没有更新的问题(手摸手，带你用vue撸后台 读后感)...
weixin_34007020的博客
11-01 1944
参照《着手摸手，带你用vue撸后台》一文，本人做了前端的权限判断 https://segmentfault.com/a/1190000009275424 首先就是在addroutes后，$router.options.routes不会更新。因为本人的侧面导航栏是使用$router.options.routes来遍历生成的。于是就发现这个问题。 作者估计这个是个bug，已经提交issus...
this.$router.options.routes
weixin_56263402的博客
07-08 9821
this.$router.options.routes 可以拿到初始化时配置的路由规则 this.$route 可以拿到当前路由信息 （包括路由路径，参数0
关于vue-router动态添加路由$router.options不更新的解决办法
热门推荐
xcbbqcl的博客
07-03 2万+
昨天为了调试这个问题搞了很久，开发的后台菜单是遍历router.options，之前注册静态路由的时候router.options，之前注册静态路由的时候router.options，之前注册静态路由的时候router.options里面都是有值的，但是动态注册router.addRoutes就不行，router.addRoutes就不行，router.addRoutes就不行，router.op...
Vue Router3动态添加路由刷新依然失效
qq_25080529的博客
11-24 2110
动态添加的路由，刷新后，优先级比在new VueRouter中初始化的路由的404通配路由优先级来的低，因此404路由不能放在初始化路由中。
let list =this.$router.options.routes this.$router.push("/")
12-13
而`let list = this.$router.options.routes`是获取Vue.js路由配置中的路由列表。这两者之间并没有直接的联系，因此`this.$router.push("/")`并不能直接赋值给`list`。 如果想要在Vue.js中进行路由跳转，可以使用...
vue-router之解决addRoutes使用遇到的坑
10-15
但是，需要注意的是，直接修改`router.options.routes`并不会立即生效，因为Vue Router的路由是响应式的，需要调用`router.replace`或`router.push`来触发更新。 3. **管理路由状态**：保存和恢复路由状态。退出...
this.$store.dispatch 和this.$router
12-13
`this.$store.dispatch` 是Vuex库中用于触发异步或同步动作（actions）的方法。它允许你在组件内部执行store中的逻辑并更新状态。...const routes = this.$router.options.routes // 获取应用的所有路由定义 ```
在vue2中如何在this.$router.push("/draft");跳转后 本界面的数据不会销毁
最新发布
07-29
回到问题：使用`this.$router.push`跳转后保持页面数据不销毁。 我们已经配置了缓存，所以当跳转到另一个页面再返回时，原来的页面会被缓存，数据不会销毁。 但是，如果我们在同一个页面（比如列表页）跳转到...
vue-router动态添加路由后，左侧菜单栏不更新。
weixin_47372236的博客
09-24 2133
使用vue-element-admin的模板，想通过后台动态添加路由，无奈不成功，弄了2天，查了好多解决办法，解决不掉，就放下，慢慢来。终于功夫不负有心人，慢慢来吧。 在addRoutes添加路由数组前，赋值给router.options.routes router.options.routes = accessRoutes; // 动态添加格式化过的路由 router.addRoutes(accessRoute
Vue的router.addRoutes不起作用
V1040375575的博客
05-25 1331
说明：options是传递给vuerouter构造函数的对象，之后没有修改（也就是vue实例化时在router.js中定义的那些路由），所以通过动态添加的路由是不会显示在options.routes中的，Vue就是这么设计的。项目说明：后台项目使用的是vue-admin-template，上面截图的文件目录路径：‘项目根目录/src/layout/components/Sidebar/index.vue’文件中。来渲染的，最终使用了Vuex中的数据来渲染的。最终发现左侧菜单组件中的路由是根据。
vue中 router.addRoute()动态添加路由,刷新页面404
weixin_55254452的博客
06-20 1734
第一部坑：router.addRoute()后的路由，router.options.routes是获取不到最新路由的，误导我一直认为添加路由失败，添加不进去，其实已经存在了！很多项目都会写404 但是！404不能写在静态路由中，因为匹配动态路由时会直接进入404，就算你成功添加了动态路由，因为顺序 直接进入了404。第二部坑：在路由守卫中，错误的next()会导致循环调用导致内存溢出，所以要合理的正确的写判断条件和next(), 为此我研究了很久next()第三个坑：那就是404。
vue-router addRoutes 侧边栏不显问题
08-19 1171
学习 vue-admin-master 项目 动态添加路由 addRoutes 方法 实现侧边栏动态显示 问题侧边栏不显示，url写入新加入地址能进入页面 表明我方法调用成功。 刚开始认为addRoutes方法调用就会维护 router.options.routes数组 更新它 ，理想很美好 网上找这篇博文 原文有对options的详细描述 有需要请移步， 对于侧边栏 组件绑定数组是 router.options.routes 网上不是文章都推荐 在addRoutes前 用concat修改这个数组 ，
router.addRoutes失效
qq_45806112的博客
07-26 1123
router.options.routes没有新增的路由。添加后重新进一下这个页面，这时就不需要再添加路由了。
vue3 中的router.addRoute和router.options.routes
chencaw的专栏
11-17 7963
问题：router.addRoute后用router.options.routes去都不更新 参考 Vue的router.addRoutes()不起作用解决方案 - 认真，是一种态度 - 博客园 我的暂时解决 import Layout from '@/layout/index.vue' import { useRouter} from "vue-router"; export default { components: { SidebarItem, }, setup() {
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
Alloom的博客
08-12 1万+
2021.8.12 坑50（vue-router4、addRoute()、router.options.routes未更新）：进行动态权限获取菜单的设置，使用了addRoute()来添加路由，但是router.options.routes未更新，依然只有原来的路由列表值。 相关API简要介绍： addRoute()，添加一条新的路由记录到路由，文档：API 参考 | Vue Router (vuejs.org) router.options.routes，应该添加到路由的初始路由列表，文档： AP.
ElementUI 中 通过遍历 $router.options.routes 获得菜单，却不刷新的问题
weixin_54362826的博客
08-11 1456
菜单的获得方式 <sidebar-item v-for="route in $router.options.routes" :key="route.path" :item="route" :base-path="route.path" :totalNum="totalNum" /> 问题： 不同权限的用户菜单内容不一样，但是在登录后用了缓存，显示的是上一个用户的菜单内容，需手动
vue使用addRoutes()时出现的问题
2301_79313375的博客
12-19 393
问题1：项目中遇到权限处理时，通常使用addRoutes()动态添加路由的方法来实现，由于我在菜单中使用this.$router.options.routes，发现菜单并不会渲染新的路由，打印this.$router发现options.routes里面并没有更新。问题2：此方法会在登陆时利用vuex将用户信息以及菜单栏需要展示的菜单路由保存，这样在用户第一次登陆项目时，动态渲染的菜单路由页面一切正常，但是当再次刷新的时候，就会出现白屏现象。原因：页面刷新白屏其实是因为vuex和刷新页面会重新。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值