关于vue-router动态添加路由$router.options不更新的解决办法

最新推荐文章于 2024-07-17 14:30:58 发布
最新推荐文章于 2024-07-17 14:30:58 发布
阅读量2.2w 收藏 19
点赞数 8
分类专栏： VUE 文章标签： vue-router vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcbbqcl/article/details/94560026
版权

昨天为了调试这个问题搞了很久，开发的后台菜单是遍历 r o u t e r . o p t i o n s ， 之 前 注 册 静 态 路 由 的 时 候 router.options，之前注册静态路由的时候 router.options，之前注册静态路由的时候router.options里面都是有值的，但是动态注册 r o u t e r . a d d R o u t e s 就 不 行 ， router.addRoutes就不行， router.addRoutes就不行，router.options值始终不更新，后来在网上查到在addroutes后，$router.options.routes没有更新的问题之后，我是这样解决的：
手动添加options.routes菜单才能遍历

快乐远航1
关注
  • 8
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue router children 路由变了 组件没变_动态路由（vue）
weixin_39589923的博客
12-12 715
前言 以前我在做单页面应用时，由于静态页面资源都是打包扔在 nginx 上的，而 nginx 只作为流量接入层，也没法写业务逻辑，使之产品提出特定页面需要指定用户才能访问的功能时，基于“经验”限制，我只能举白旗。后果就是，用户可以“自由”通过链接看到非预期的页面内容，虽然我们可以通过后端接口的数据限制，或者页面加载后的二次强跳转使“流程回归正常”，不过页面加载后的一次重新加载体验总不是很...
解决vue-router addRoutes路由不刷新问题
weixin_33935505的博客
12-29 6233
发现问题 在vue后台管理项目中,动态路由是一个必须的功能，根据不同权限显示不同的路由表。通常的做法有两种，1）前端将所有路由定义到配置文件中，后台返回用户角色。前端根据用户角色从配置文件中去相应的路由对象生成路由表。（此种方法用的比较多，至今未发现有何问题）. 2)前端路由表中只配置公共路由，后台根据前端登录用户返回相应的路由表。前端拿到路由表动态（addRoutes）的加载出来。正...
vue使用addRoutes()方法后，this.$router.options.routes未更新
SimpleCow的博客
08-14 6365
背景 最近在搞vue的动态路由，在路由守卫中添加了获取菜单的方法，并添加进了router，但是在主页进行渲染时，this.$router.options.routes方法获取出的结果依旧是默认的几个菜单 解决 解决方案地址 ...
Vue的router.addRoutes不起作用
V1040375575的博客
05-25 425
说明：options是传递给vuerouter构造函数的对象，之后没有修改（也就是vue实例化时在router.js中定义的那些路由），所以通过动态添加的路由是不会显示在options.routes中的，Vue就是这么设计的。项目说明：后台项目使用的是vue-admin-template，上面截图的文件目录路径：‘项目根目录/src/layout/components/Sidebar/index.vue’文件中。来渲染的，最终使用了Vuex中的数据来渲染的。最终发现左侧菜单组件中的路由是根据。
在addroutes后，$router.options.routes没有更新的问题(手摸手，带你用vue撸后台 读后感)...
weixin_34007020的博客
11-01 1869
参照《着手摸手，带你用vue撸后台》一文，本人做了前端的权限判断 https://segmentfault.com/a/1190000009275424 首先就是在addroutes后，$router.options.routes不会更新。因为本人的侧面导航栏是使用$router.options.routes来遍历生成的。于是就发现这个问题。 作者估计这个是个bug，已经提交issus...
踩坑记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.
vue-router之解决addRoutes使用遇到的坑
10-15
在Vue Router中，`addRoutes`是一个非常实用的API，用于在应用运行时动态地添加路由。这在处理用户权限和动态菜单时尤其有用。在上述的场景中，开发者遇到了一个问题，即在用户退出并重新登录后，浏览器控制台会显示...
详解基于vue-router的动态权限控制实现方案
08-29
基于 Vue-Router 的动态权限...我们可以使用 Vue-Router 的动态路由功能来解决在使用 Vue 开发带权限管理系统时的动态加载路由问题。该解决方案可以帮助我们轻松地实现客户端路由管理，并且可以满足我们的业务需求。
vue-router 2.0 跳转之router.push()用法说明
10-14
针对描述中提到的问题，即在 iOS 设备上点击返回键时，路由改变但页面内容不更新，解决方案是利用 Vue Router 的导航守卫。可以在首页组件中添加 `beforeRouteLeave` 钩子，阻止返回到登录页的操作： ```javascript...
搭建Vue从Vue-cli到router路由护卫的实现
10-15
搭建Vue项目通常从安装Vue CLI开始，...总之，从Vue CLI创建项目到实现SVG图标加载，再到Vue Router路由卫兵的应用，这些都是构建现代Vue应用程序的基础步骤。通过不断学习和实践，你将能够构建出功能丰富的单页应用。
vue-router路由 myv源码.zip
09-03
1. **Router 实例**：通过 `new VueRouter(options)` 创建，`options` 包含路由配置数组。 2. **Route构造函数**：表示一个路由对象，包含了当前路由的信息，如 path、params、query、matched 等。 3. **HashHistory...
router.addRoutes失效
qq_45806112的博客
07-26 707
router.options.routes没有新增的路由。添加后重新进一下这个页面，这时就不需要再添加路由了。
vue3 中的router.addRoute和router.options.routes
chencaw的专栏
11-17 7255
问题：router.addRoute后用router.options.routes去都不更新 参考 Vue的router.addRoutes()不起作用解决方案 - 认真，是一种态度 - 博客园 我的暂时解决 import Layout from '@/layout/index.vue' import { useRouter} from "vue-router"; export default { components: { SidebarItem, }, setup() {
踩坑记16 vue-router4 动态路由 刷新404/白屏/样式错误 next css | 退出登录 removeRoute()后 router.options.routes未更新
Alloom的博客
08-16 1万+
2021.8.16 坑53（vue3、vue-router4、动态路由、刷新404或白屏、next）： 简略版：（tips：不只刷新会出问题，输入网址导航也会） 1、刷新404：将匹配全部为定义路径到404的路由从静态路由表中去除，在动态权限路由都添加了之后在添加。接下来可能会报warn并白屏，解决方法见下一条2。 2、刷新白屏：如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由，则需要将动态权限路由添加后的next()放行，改为next(to)触发
vue-router的动态添加子路由的注意事项
weixin_47607451的博客
05-28 8835
vue-router的路由配置对象的复制问题addRoutes方法如何添加到子路由中去新增的路由对象如何和原路由合并如何判断动态添加的路由是否存在欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
swift 类似高德地图和58同城上下滑动view
2401_84436095的博客
04-27 446
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
this.$router.options.routes
weixin_56263402的博客
07-08 9437
this.$router.options.routes 可以拿到初始化时配置的路由规则 this.$route 可以拿到当前路由信息 （包括路由路径，参数0
Vue Router RouterOptions（linkActiveClass、linkExactActiveClass）
最新发布
Vinca@的博客
07-17 965
在实际开发中，可以通过动态设置这些类名，或者结合条件来自定义样式，以便更好地反映当前路由的状态。以下是一个简单的示例，展示了如何使用 linkActiveClass 和 linkExactActiveClass，以及如何根据不同的路由状态自定义类名。
_vue.prototype.$router = this.$options.router
08-05
这行代码的作用是将 Vue 实例的 `$router` 属性指向 `this.$options.router`，即将 Vue 实例的 `$router` 属性设置为组件实例中的 `router` 选项。 在 Vue 中，`$options` 是每个组件实例上的一个属性，它包含了当前组件的初始化选项，包括 `data`、`computed`、`methods`、`watch` 等。而 `router` 是在 Vue Router 中配置的路由选项。 通过将 `this.$options.router` 赋值给 `$router`，可以在组件实例中通过 `$router` 来访问路由实例，从而进行路由导航操作，如跳转到指定的路由、获取当前路由信息等。 需要注意的是，这行代码应该在 Vue 实例创建之前执行，通常在挂载之前或者在组件的 `beforeCreate` 钩子中执行。这样可以确保在 Vue 实例创建后，可以直接通过 `$router` 访问到路由实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值