Vue的router.addRoutes不起作用

于 2024-05-25 01:06:35 发布
阅读量323 收藏
点赞数 2
分类专栏： 前端记录 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V1040375575/article/details/139187432
版权

Vue的router.addRoutes()不起作用解决方案

最近在学习制作后台管理系统的时候，涉及到了权限，在通过后台获取到数据后使用router.addRoutes()时不起作用。

最终发现左侧菜单组件中的路由是根据this.$router.options.routes来渲染的，最终使用了Vuex中的数据来渲染的。

说明：options是传递给vuerouter构造函数的对象，之后没有修改（也就是vue实例化时在router.js中定义的那些路由），所以通过动态添加的路由是不会显示在options.routes中的，Vue就是这么设计的。所以需要将动态添加的路由存储在Vuex或者其他地方。

可参考此链接：https://segmentfault.com/q/1010000021000331/a-1020000021000766

在这里插入图片描述

项目说明：后台项目使用的是vue-admin-template，上面截图的文件目录路径：‘项目根目录/src/layout/components/Sidebar/index.vue’文件中

pandarking
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接通过addRoutes方法进行添加，并且生成侧边栏。 大致步骤： 1.拦截路由 2.取到后台路由数据 3.添加并且保存路由（VUEX） ----------------------------------------------- 本demo根据模拟数据实现包含菜单权限和按钮权限在内的权限管理。 判断登录后，通过store.getters.router判断是否存有路由表，是的话获取当前页面按钮权限后直接next()进行跳转；否的话用axios后台取一次路由数据并存到vuex。
vue addRoutes不生效问题
热门推荐
u013465194的博客
01-09 2万+
动态添加导航栏时，addRoutes不生效解觉 1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加 2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏 ...
解决vue addRoutes不生效问题
10-14
主要介绍了解决vue addRoutes不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
router.addRoutes失效
qq_45806112的博客
07-26 656
router.options.routes没有新增的路由。添加后重新进一下这个页面，这时就不需要再添加路由了。
vue-router 4.0版本addRoutes方法不生效问题解决
小龙狗的博客
07-13 3426
解决addRoute方法不生效问题
vue-router 动态路由刷新addroutes()添加的路由失效问题
L1ak的博客
03-04 7089
1.在添加完路由之后，使用vuex将router存起来 2.使用beforeEach判断页面是否刷新，若是刷新，将vuex中的router.matcher赋值给当前router.matcher router.beforeEach((to, from, next) => { iView.LoadingBar.start() const token = getToken() if (!token && to.name !== LOGIN_PAGE_NAME) { //
记录一次vue-router在beforeEach中addRoutes无效
陈景夏
04-08 2582
router.beforeEach((to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { if (!store.getters.name) { // 模拟一个请求 setTimeout(() => { // 请求
vue-router之解决addRoutes使用遇到的坑
10-15
在Vue Router中，`addRoutes`是一个非常实用的API，用于在应用运行时动态地添加路由。这在处理用户权限和动态菜单时尤其有用。在上述的场景中，开发者遇到了一个问题，即在用户退出并重新登录后，浏览器控制台会显示...
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
10-16
主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决使用router.addRoutes()设置动态路由，页面刷新后无效
wangjie33589的博客
03-25 8406
最近在搞一个vue后台管理平台的项目，记录一下最近项目中遇到的一个坑，就是使用router.addRoutes()设置动态路由，页面刷新后重定向到了404，后来经过几天的研究才找到的真正的原因。 原来是我在登陆之后把路由列表转换成了字符串类型数据存在了本地，当取出来的时候在转换成JSON时候 发现发生这种问题的根本原因在于路由component参数在被json转换成字符串之后，然后转回对象的时...
vue3动态路由到底如何实现vue-router4中addRoutes失效？
m0_73854403的博客
01-19 1123
大家都知道，后台管理系统中，避不开的一个问题，就是角色权限，那么权限这块必然跟菜单路由关联。vue2中可以通过addRoutes函数，实现动态路由，那么vue3怎么实现呢。
关于vue.js中动态路由addRoutes失效，另一种方案
a983677218的博客
06-12 3448
在我们没用addroutes之前路边中有12个对象，但是在使用之后还是12个，这个问题研究了很久。最后想来想去还是直接从源头触发，我们目的是像路边表中添加东西，那不就是在vueRouter中options的router数组中添加对象吗？官网给的提示很多人没注意，在添加动态路由的时候404这个页面一定要在最后，不然你点了动态路由，因为他是从上到下遍历的，直接给你跳到404了。在成功的像router中添加了2个路由后，在我们的左侧菜单也将测试页面显示了出来（还有个是404页面）
vue-router添加动态路由及无限刷新白屏和添加不生效问题_router(4)
最新发布
2401_84434331的博客
05-16 451
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})} else {== -1) {next()} else {next(/login?})})},## 问题二：addRouters()不生效> 执行完addRouters()后，我查看了store里的routes，已经有将动态路由添加进去，但是菜单中还是没有显示。
vue 项目中使用粘性布局不起作用_解决vue addRoutes不生效问题
weixin_35077079的博客
01-16 389
动态添加导航栏时，addRoutes不生效解觉1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏补充知识：vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决起因在当前项目中使用的iview-a...
router.addRoutes()方法动态添加路由配置
qq_46344419的博客
06-16 3310
router.addRoutes()方法动态添加路由配置
简单理解Vue权限路由通过router.addRoutes实现
qq_42242976的博客
07-28 1391
首先创建页面A和页面B和404，假设A是不需要权限的页面，而B是需要有权限才能访问的页面,只有登录后的账户有权限才能访问 在router中的index.js中配置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) export let homeRouter = [{ path: '/', ...
vue-router 使用 addRoutes 动态添加路由跳转后页面刷新空白问题
weixin_43299180的博客
03-03 1万+
问题描述： 在做菜单权限的时候，使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加到路由里面去。菜单正常展示，在点击菜单跳转之后，浏览器刷新一下，页面没有跳转到 404 页面，而是变成了空白。 问题原因： addRoutes 和 vuex 一样，在浏览器刷新后数据会丢失，因为刷新页面 Vue 会重新实例化，路由也会恢复到初始路由。 解决方案： 在页面刷新之后重新获取到通过权限修改后的路由表，然后再次使用 router.addRoutes() 方法将新路由表动态添加到路由里面
vue router.addRoutes
05-01
`router.addRoutes` 是 Vue Router 提供的一个方法，用于动态添加路由规则。 它的使用方法如下： ```javascript router.addRoutes(routes) ``` 其中，`routes` 是一个数组，包含需要添加的路由规则。每个路由规则应该是一个对象，包含以下属性： - `path`：路由路径，例如 `/home`。 - `component`：对应的组件，可以是一个组件选项对象，也可以是一个通过 `import` 导入的组件。 - `name`：路由名称，用于导航和编程式路由。 - `meta`：路由元信息，可以用于存储一些额外的信息，例如页面标题、权限控制等。 使用 `router.addRoutes` 可以在运行时动态添加路由规则，这在需要根据用户权限或其他动态因素来生成路由时非常有用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值