关于router.addRoute动态添加子路由失败的问题解决方案

已于 2023-02-08 18:20:24 修改
阅读量5.5k 收藏 3
点赞数 1
分类专栏： 前端爬坑 经验总结 文章标签： 前端 javascript 开发语言
于 2023-02-08 16:12:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daiwu4044/article/details/128937591
版权

关于router.addRoute动态添加子路由失败的问题解决方案

问题描述

router.addRoute("main", route);

本应该给main路由下面添加子路由的，但是却加在了跟路由上。

解决思路

打个断点发现matcher.getRecordMatcher()函数没有匹配到mian路由

在这里插入图片描述

一开始以为是代码跑到这静态路由mian没有生成的原因导致的，于是打印了下当前路由发现已经存在。
在这里插入图片描述

但是一眼就撇到了name: undefined,盲猜游戏结束。给路由加了个name，果然正常子路由添加成功。

在这里插入图片描述

Elon丶
关注
专栏目录
vue-router4.0 关于后台管理系统权限动态添加路由解决方案
ViFong的博客
06-18 3470
首先说明一下vue-router4.0删除了 addRoutes的方法, 而是用addRoute代替。那么意味着我们动态添加路由的时候需要一个一个的添加。看下官方文档解释，添加新路由同时需要触发新路由才能显示页面 先看下这种方式：在路由守卫中添加动态路由（router4.0中next为可选） // 获取权限的路由数组 const list = await store.dispatch("setUserInfo"); list.forEach((item) => {
详解Vue.js搭建路由报错 router.map is not a function
10-19
一种解决方案是将Vue Router版本降级到兼容`router.map`的版本，例如`vue-router@0.7.13`，这是一个针对Vue 1.x的版本。安装此版本后，你可以在你的项目中按照1.0版本的API来配置路由，如下： ```javascript var ...
vue-router之解决addRoutes使用遇到的坑
11-20
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下： // router.js 文件 // 需要用户权限的路由表 const appRoutes = [ { path:
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
12-01
在我不知道vue的路由还可以通过addRoutes动态添加时，我只知道vue的路由都是写死在路由表中的，每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API，立马研究了一下。 router.addRoutes： 函数签名： router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个符合routes选项要求的数组。 点这里去看router.addRoutes的官方解释 白话就是需要动态加入到路由表中的路由是必须要跟我们提前
vue动态路由添加不成功
最新发布
weixin_47979438的博客
01-07 2713
动态路由添加 根据权限动态加载路由
vue-router添加动态路由及无限刷新白屏和添加不生效问题
weixin_43993065的博客
03-01 8873
文章目录添加动态路由问题一：路由守卫死循环问题二：addRouters()不生效最终版，所有相关文件 添加动态路由 router/index.js 在router.js里定义asyncRoutes作为动态路由数组， import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout' Vue.use(Router) export const constantRoutes = [ { pa
vue3 动态添加路由不生效解决
weixin_50586667的博客
06-22 4937
vue3 动态添加路由不生效解决 描述 router.addRoute({path:“/addrouter”,name:‘addrouter’,component:() => import(“./views/addrouter.vue”)}) 输入路由地址访问不了，提示没有匹配到这个路由 解决方案 不能直接在浏览器输入url地址去访问，可以通过调用方法router.push 能成功跳转 ......
router.addRoute()报错 Uncaught Error: [vue-router] “path” is required in a route configuration
hupei
02-08 5669
Uncaught Error: [vue-router] "path" is required in a route configuration（未捕获错误：[vue-router]："路径"在路由配置中是必需的）
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
然而，由于此时用户尚未登录，我们无法确定其角色和相应的权限，这就导致了一个问题：如何动态地添加路由？ 解决这个问题的一个关键在于 Vue Router 提供的 `addRoutes` 方法。这个方法允许我们在 Vue Router 实例...
解决vue addRoutes不生效问题
10-14
一种可行的解决方案是重置`router`的`matcher`属性。 首先，我们需要修改`router/index.js`中的代码，创建一个新的函数`createRouter`，该函数接收一个路由数组并返回一个新的`Router`实例： ```javascript // ...
vue3路由，vue-router4，动态添加路由不生效的问题
bittingCat的博客
10-21 9807
项目场景： 在vue3.0中，做了个动态添加权限路由的功能，可是死活不行 问题描述： 使用router.addRoute添加好路由之后，输入路由地址死活访问不了，提示没有匹配到这个路由 但是把路由实例（router.getRoutes()）打出来却又显示已经有，已经添加上去了，最后还怀疑是不是router4当中新特征，只能一个个添加，当添加子路由的时候还要多传一个父路由的name，最后也用递归去做了，但还是照样不行,也试过很多种方式，也检查过路由的各项字段，也没出错，还怀疑是引入组件的方式不正确。百思不得
vue addRoutes不生效问题
热门推荐
u013465194的博客
01-09 2万+
动态添加导航栏时，addRoutes不生效解觉 1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加 2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏 ...
router.addRoutes失效
qq_45806112的博客
07-26 823
router.options.routes没有新增的路由。添加后重新进一下这个页面，这时就不需要再添加路由了。
vue addrouters 动态添加子路由 页面没有按照子路由的形式展开在父路由页面上
hello917的博客
09-12 1933
登录的时候 后台返回页面的权限表 然后拿到该数组 便进行动态添加嵌套路由操作 具体代码如下 export function initRouters(){ myRouter.options.routes[2].children = [] //嵌套路由清空 避免重复添加 let projectIndex = JSON.parse(sessionStorage.getItem("projectIndex")) //选中项目索引 let menuRouters = JSON.parse(s
router.addRouters()方法报错
weixin_62262335的博客
03-18 842
router.addRouters
vue-router 动态路由刷新addroutes()添加的路由失效问题
L1ak的博客
03-04 7150
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) { //
addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
weixin_39564807的博客
12-21 1078
前言某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。应用场景：用户a登录进系统，页面上有个按钮，点击之后会动态添加路由并且跳转，跳转过去之后，用户刷新后也会停留在当前页面。 不点这个按钮，浏览器输入地址，用户会跳到404页面思路1.用户点击按钮，用addRutes动态...
记录一次vue-router在beforeEach中addRoutes无效
陈景夏
04-08 2664
router.beforeEach((to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { if (!store.getters.name) { // 模拟一个请求 setTimeout(() => { // 请求
router.beforeEach里面通过 router.addRoute添加路由
07-04
是的，你可以在 `router.beforeEach` 中使用 `router.addRoute` 方法来动态添加路由。`router.beforeEach` 是 Vue Router 中的一个全局前置守卫，用于在路由跳转之前执行一些逻辑。 下面是一个示例，展示如何在 `router.beforeEach` 中使用 `router.addRoute` 添加路由： ```javascript import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ // 初始路由配置 { path: '/', component: Home }, // ... ] }) router.beforeEach((to, from, next) => { // 根据一些条件判断是否需要动态添加路由 if (someCondition) { // 动态添加路由 router.addRoute({ path: '/dynamic', component: DynamicComponent }) } next() }) export default router ``` 在上面的示例中，当某些条件满足时，`router.addRoute` 方法会动态添加一个名为 `/dynamic` 的路由，其组件为 `DynamicComponent`。请注意，`router.addRoute` 方法必须在 `next()` 之前调用，以确保路由跳转能正常进行。 希望能解答你的问题！如果还有其他问题，请随时提问。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值