问题：不同vue-router版本下，addRoutes的使用问题

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

注意: vue-router新版本下，router.addRoutes已被废弃；使用 route.addRoute() 代替

旧版本下，addRoutes的使用方法

// accessRoutes为路由对象数组
router.addRoutes(accessRoutes)

新版本下，addRoute的使用方法，对路由对象数组进行解构

router.addRoute(...accessRoutes)
狼性书生
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue-router之解决addRoutes使用遇到的坑
11-20
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下： // router.js 文件 // 需要用户权限的路由表 const appRoutes = [ { path:
Error [vue-router] “path“ is required in a route configuration
web15185420056的博客
02-26 1078
vue 项目：Uncaught Error: [vue-router] “path” is required in a route configuration. 原本自己的代码，因为在调试的时候看到了一行警告 // 警告 vue-router.esm.js?8c4f:16 [vue-router] router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead. 想
Vue的router.addRoutes不起作用
最新发布
V1040375575的博客
05-25 332
说明：options是传递给vuerouter构造函数的对象，之后没有修改（也就是vue实例化时在router.js中定义的那些路由），所以通过动态添加的路由是不会显示在options.routes中的，Vue就是这么设计的。项目说明：后台项目使用的是vue-admin-template，上面截图的文件目录路径：‘项目根目录/src/layout/components/Sidebar/index.vue’文件中。来渲染的，最终使用了Vuex中的数据来渲染的。最终发现左侧菜单组件中的路由是根据。
Vue router动态添加路由警告问题记录
Komorebi_00的博客
01-30 2021
[vue-router]：router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
vue-element后台鉴权流程
weixin_46311806的博客
04-07 2488
路由拦截鉴权常用的两种方法 1：路由拦截：单纯给路由加字段标识符，通过路由拦截实现 2：动态路由：第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置 比较： 路由拦截实现方式比较简单，只需要简单的在router.beforeEach中根据路由配置信息过滤页面是否有权限前往改组件，若相对于的权限不够则不前往相应的组件 动态路由实现相对比较复杂，并且需要后端的配合，本质是路由配置表分成两部分，相应的不同用户登录的时候，是根据用户权限信息过滤筛选除路由配置表，动态添加，而用户没有权限的部分则不渲染 .
router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead
weixin_43942010的博客
05-29 9979
问题描述 vue-router动态添加路由报错：[vue-router] router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead. 解决方案： router.addRoutes（）在vue3弃用，需要用router.addRoute（） 多个路由具体写法： dynamicRoutes.forEach(res=>{ router.addRoute(res)
router.addRoutes()和router.addRoute()
yyh1994的博客
03-27 670
新版本router.addRoutes已废弃：使用 router.addRoute() 代替。router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
解决这个问题的一个关键在于 Vue Router 提供的 `addRoutes` 方法。这个方法允许我们在 Vue Router 实例创建后，即程序运行时动态添加新的路由。在用户登录成功后，我们可以从服务器获取用户的角色和对应的菜单权限...
keepRouter:vue 解决vue-router的addRoutes刷新失效的问题(匹配不到跳转404)
05-09
一个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...
【前端问题库】[vue-router] router.addRoutes() is deprecated and has been removed in Vue Router
LIU_CAN的博客
02-06 3092
[vue-router] router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
vue-router的addRoutes()和addRoute()的使用问题
xjf106的博客
05-11 7130
注意：router.addRoutes已废弃：使用 router.addRoute() 代替。 addRoutes的使用方法: router.addRoutes(newRoutes) addRoute的使用方法: for (let x of newRoutes) { router.addRoute(x) } 官方的解释是 router.addRoute 接受的是一个路由规则，也就是一个对象，或者接受一个字符串和一个对象。 ...
Vue 进阶系列丨权限控制 addRoute()
HFunTeam的博客
11-21 3097
Vue进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！2013年7月28日，尤...
用vue-router开发权限中碰到的坑：addRoutes使用遇到的坑
Golden_soft的专栏
03-09 5261
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vu...
router.addRouters()方法报错
weixin_62262335的博客
03-18 726
router.addRouters
vue-router当中的addRoutes与、导航守卫
吴冬雪的博客
05-25 863
已存在的不会被addRouter里面的覆盖，是具有优先权的。
router.addrouters与router.addRoute的区别
weixin_61709880的博客
06-18 913
router.addRouters(),一般使用在权限控制等地方,而且配合beforeEach一起使用。2 添加子路由,添加子路由只需要在addRoute(路由名称name,需要添加的路由)addRoute添加路由,如果有同名路由,会选择覆盖路由,子路由添加也一样都是覆盖路由。1与addRouters可以进行添加子路由。本人技术很菜,如果有错误地方,欢迎大家来指正,
vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path
热门推荐
ZHANG_666
05-12 4万+
vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter 动态路由一般是从后端获取 然后经过数据格式处理 但在页面刷新后会出现一下警告： vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other” 但通过getRouters又能够获取到所有的异步路由 分析:页面刷新后由于是异步获取的原
Vue 增加动态路由功能 【在原有系统上增加】
银滴子的博客
03-09 1781
1. 修改router/index.js 增加 export const asyncRoutes = [ { path: '/qw', component: Layout, name: 'qw', meta: { title: '企微微信', icon: 'el-icon-files',roles: ['admin', 'dev'] }, children: [ { path: 'msg', name..
vue router.addRoutes和router.addRoute的异同和使用方法
redrun博客
05-12 1万+
vue router.addRoutes和router.addRoute的异同和使用方法 addRoutes传入数组 const accessRoutes = await store.dispatch( "permission/generateRoutes", roles ); router.addRoute(accessRoutes); // 动态添加可访问路由表 // 如果
vue-router之解决addroutes使用遇到的坑
05-01
在使用Vue Router的addRoutes方法时，可能会遇到一些坑。这个方法允许我们在运行时动态添加路由配置，但是需要注意以下几点： 1. 在调用addRoutes方法前，需要保证路由的基础配置已经完成，否则无法正确添加路由。这意味着需要在创建Vue实例之前，就要定义好路由基础配置。 2. addRoutes方法是异步的，所以不能保证添加完路由立即生效。因此，需要不断地监测路由的变化并及时更新视图。 3. addRoutes 方法只能添加新的路由，不能删除或修改已经存在的路由。对于已经存在的路由，如果需要修改或删除，需要重启应用或重新加载页面。 4. addRoutes方法对于嵌套路由的处理比较复杂。需要保证新路由的父子关系正确，否则会导致一些奇怪的问题。并且，如果使用了动态路由参数，还需要考虑一些特殊情况，如参数值的合法性和编码问题。 综上所述，使用addRoutes方法需要非常小心和谨慎，需要仔细检查和测试，以避免一些奇怪的问题。同时，还需要清楚地了解路由的基本概念和配置方法，才能更好地掌握addRoutes方法的正确用法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼性书生

谢谢鼓励！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值