解决使用router.addRoutes()设置动态路由，页面刷新后无效

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

最近在搞一个vue后台管理平台的项目，记录一下最近项目中遇到的一个坑，就是使用router.addRoutes()设置动态路由，页面刷新后重定向到了404，后来经过几天的研究才找到的真正的原因。

原来是我在登陆之后把路由列表转换成了字符串类型数据存在了本地，当取出来的时候在转换成JSON时候

发现发生这种问题的根本原因在于路由component参数在被json转换成字符串之后，然后转回对象的时候无法解析

找到根本原因后问题后问题就迎刃而解了

 

 

参考文献 https://segmentfault.com/q/1010000009524078

               https://forum.vuejs.org/t/vue-router-3-0-1-router-addroutes/33181/6

              

清风拂山wj
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
keepRouter:vue 解决vue-router的addRoutes刷新失效的问题(匹配不到跳转404)
05-09
crmm 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。 keepRouter
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
Vue的router.addRoutes不起作用
最新发布
V1040375575的博客
05-25 348
说明：options是传递给vuerouter构造函数的对象，之后没有修改（也就是vue实例化时在router.js中定义的那些路由），所以通过动态添加的路由是不会显示在options.routes中的，Vue就是这么设计的。项目说明：后台项目使用的是vue-admin-template，上面截图的文件目录路径：‘项目根目录/src/layout/components/Sidebar/index.vue’文件中。来渲染的，最终使用了Vuex中的数据来渲染的。最终发现左侧菜单组件中的路由是根据。
router.addRoutes失效
qq_45806112的博客
07-26 668
router.options.routes没有新增的路由。添加后重新进一下这个页面，这时就不需要再添加路由了。
vue-router 动态路由刷新addroutes()添加的路由失效问题
L1ak的博客
03-04 7092
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 addRoutes不生效问题
热门推荐
u013465194的博客
01-09 2万+
动态添加导航栏时，addRoutes不生效解觉 1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加 2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏 ...
关于vue.js中动态路由addRoutes失效，另一种方案
a983677218的博客
06-12 3469
在我们没用addroutes之前路边中有12个对象，但是在使用之后还是12个，这个问题研究了很久。最后想来想去还是直接从源头触发，我们目的是像路边表中添加东西，那不就是在vueRouter中options的router数组中添加对象吗？官网给的提示很多人没注意，在添加动态路由的时候404这个页面一定要在最后，不然你点了动态路由，因为他是从上到下遍历的，直接给你跳到404了。在成功的像router中添加了2个路由后，在我们的左侧菜单也将测试页面显示了出来（还有个是404页面）
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
在 Vue 项目中，我们经常需要使用 addRoutes 动态添加路由，但是在刷新页面后，这些动态添加的路由就会失效。下面我们来介绍如何解决这个问题。 应用场景 在某些场景下，我们需要利用 addRoutes 动态添加路由，...
vue-router之解决addRoutes使用遇到的坑
10-15
1. **刷新页面**：在用户退出登录后，强制刷新页面，确保Vue Router实例重新初始化，清空之前的动态路由。但这种方法用户体验不佳，因为页面会完全重载。 2. **移除旧路由**：在添加新路由前，先移除之前动态添加的...
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
10-16
主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue addRoutes不生效问题
10-14
主要介绍了解决vue addRoutes不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
4. 使用 `router.addRoutes` 动态添加权限路由。 5. 在 `router.beforeEach` 中进行权限验证，确保未登录用户无法访问受保护的路由。 示例代码片段： ```javascript // app.js import Vue from 'vue' import ...
vue-router 4.0版本addRoutes方法不生效问题解决
小龙狗的博客
07-13 3438
解决addRoute方法不生效问题
记录一次vue-router在beforeEach中addRoutes无效
陈景夏
04-08 2606
router.beforeEach((to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { if (!store.getters.name) { // 模拟一个请求 setTimeout(() => { // 请求
this.$store.addRoutes(）动态路由刷新失效
qq_35022803的博客
04-01 515
router.addRoutes(）this.$store.addRoutes(）动态路由刷新失效 动态路由其他 router.addRoutes 动态路由 动态路由可以由前端控制（路由权限或者隐藏功能），或者后端实现，数据库存储权限根据权限传给前端，前端组装后add进路由，本次记录使用vue-router开发动态路由的探索（煎熬）过程。 1：把权限按层级关系存入数据库 2：登录时跳转到主页， 3：登录后持久化路由信息在前端框架，可以用 localStorage，store（使用vuex-persist）
vue 项目中使用粘性布局不起作用_解决vue addRoutes不生效问题
weixin_35077079的博客
01-16 393
动态添加导航栏时，addRoutes不生效解觉1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏补充知识：vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决起因在当前项目中使用的iview-a...
vue-router 嵌套子路由时刷新获取不到数据
jingkai0714的博客
11-17 1000
如果页面中有要请求的数据 那么刷新之后获取不到数据是因为一开始的页面的id(id只是个例子)是由别的页面传进来的，当跳转到子路由时再刷新获取不到id 解决办法 让嵌套子路由接收query参数 { path: "/singerpage", component: SingerPage, redirect: '/singerpage/hotsing', props(route) { return { id: route.query.id .
router.addRoutes 动态添加路由原因解析
03-22
router.addRoutes 是 Vue Router 中的一个方法，用于动态添加路由。它的主要作用是在运行时根据需要动态地添加路由规则，以实现更灵活的路由控制。这个方法可以用于很多场景，比如根据用户权限动态生成路由、根据后台返回的数据动态生成路由等等。在使用这个方法时，需要注意一些细节，比如路由的命名、路由的嵌套等等。如果你想了解更多关于 router.addRoutes 的使用方法和注意事项，可以参考 Vue Router 的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值