vue中router.addRoute用法

最新推荐文章于 2024-02-15 13:40:57 发布
最新推荐文章于 2024-02-15 13:40:57 发布
阅读量1.1w 收藏 4
点赞数 1
分类专栏： vue-router 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinge0508/article/details/123739452
版权

addRoute 添加一条新的路由记录作为现有路由的子路由，如果路由有一个name, 并且已经有一个与之名字相同的路由，它会先删除之前的路由；

addRoute(parentName: string | symbol, route: RouteRecordRaw): () => void
parentName: 父路由记录，route应该被添加到的位置；
route: 要添加的路由记录
addRoute(route: RouteRecordRaw): () => void
route	RouteRecordRaw	要添加的路由记录

注意：新添加的路由并不会触发新的导航 

汉武大帝·
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router之解决addRoutes使用遇到的坑
11-20
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下： // router.js 文件 // 需要用户权限的路由表 const appRoutes = [ { path:
解决vue addRoutes不生效问题
10-14
主要介绍了解决vue addRoutes不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现动态路由
最新发布
huangzi14的博客
02-15 492
vuex刷新页面数据会丢失，所以最好存在localStorage中，返回会的是数组，最好转换成字符串JSON.stringify()方法就可以。我只需要把数据利用循环添加到addRoute()方法中就可以实现。一般前端登录后，后端会返回路由的数据。// 动态路由核心代码。我在vuex中直接就能取。
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
10-16
主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
router.addRoute和router.addRoutes的区别是什么
m0_57742630的博客
07-01 1342
方法添加的路由将在下一次导航时生效。你需要重新触发导航，或者在当前导航完成后进行导航，以使添加的路由生效。是 Vue Router 中用于动态添加路由的两个方法，它们的区别在于添加路由的方式和参数类型。根据你的具体需求，选择合适的方法来添加动态路由。如果你只需要添加一个路由，可以使用。方法用于添加多个路由对象到路由器中。方法添加的路由将立即生效，并可以在当前路由的导航过程中使用。，并确保在适当的时机触发导航以使路由生效。类型的参数，表示要添加的路由对象。如果你需要添加多个路由，可以使用。
vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由
阿牛哥的博客
09-22 1万+
vue动态路由添加，vue-router的addRoute方法实现权限控制
vue新版router.addRoute基础用法
热门推荐
码小余の博客
05-24 2万+
vue新版router.addRoute基础用法 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由 在添加子路由的时候 比如原现有路由 const routes = [ { path: '/', name: 'Login', component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue
router的 addRoute用法
hj_1520的博客
02-09 1329
router的addRoute使用
addRoute（）动态添加路由。
weixin_52310583的博客
07-22 2041
登录页面，点击登录，向后端接口发送api请求。后端根据用户名不同，返回不一样的菜单列表，触发mutation中的方法，设置路由，存储到本地localstorage中。再触发addMenu动态添加路由，component: () => import('@/views/User.vue')//路由按需加载。component: () => import('@/views/User.vue')//路由按需加载。meta: { title: '用户管理' },meta: { title: '用户管理' },
Vue-Router(4) 学习之动态路由 addRoute
Raywh的博客
05-15 8241
前端动态路由：前端动态路由是指根据用户的操作或应用的状态变化，在前端代码中动态加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。addRoute 方法：在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。
详解Vue.js搭建路由报错 router.map is not a function
10-19
主要介绍了详解Vue.js搭建路由报错 router.map is not a function，非常具有实用价值，需要的朋友可以参考下
vue-router 中router-view不能渲染的解决方法
12-08
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) }); app.vue
addRoute.html
11-22
addRoute.html
基于vue,vue-router, vuex及addRoutes进行权限控制问题
12-10
基于vuex, vue-router,vuex的权限控制教程，完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程，一步一步的走完整个流程。 首先从打开本地的服务localhost:8080开始，我们知道打开后会进入login页面，那么判断的依据是什么。 首先是token。 没有登陆的用户是获取不到token的，而登陆后的角色我们会将token存到local或者seesionStorage 因此，根据当前有没有token即可知道是否登陆。 为了存取token并且方便我们操作，可以配
小满Router（第十二章-动态路由）
qq1195566313的博客
03-27 8794
动态路由 我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由) 主要使用的方法就是router.addRoute 添加路由 动态路由主要通过两个函数实现。router.addRoute()和router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用router.push()或router.replace()来手动导航，才能显示该新路由 router.addRoute({ path: '/a...
Vue动态路由
冲出仁川，走出马德里，故事还会再继续
07-24 1523
Vue动态路由1、添加路由2、在导航守卫中添加路由3、删除路由3.1 通过添加名称冲突的路由。3.2 通过调用router.addRoute()函数返回的回调。3.3 通过调用router.remoceRoute()函数按名称删除一个路由。4、添加嵌套路由5、查看现有路由   向路由器添加路由通常是通过routes选项完成的，但是在某些情况下，我们可能希望在应用程序已经运行时添加或删除路由，也就是以编程的方式添加或删除路由。 1、添加路由   动态路由主要通过两个方法来实现：router.addRoute(
vue3 多级动态路由
Cupid
08-05 2547
vue3 多级动态路由
vue3 router.addRoute
08-17
在 Vue 3 中，可以使用 `router.addRoute(route)` 方法动态添加路由。 这个方法接受一个参数 `route`，它是一个路由对象，包含了要添加的路由的相关配置信息。下面是一个示例： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ // 初始路由配置 // ... ], }); const routeToAdd = { path: '/new-route', name: 'NewRoute', component: () => import('./views/NewRoute.vue'), }; router.addRoute(routeToAdd); ``` 在上面的示例中，`routeToAdd` 是一个要添加的路由对象，它包含了要添加的路由的路径 `path`、名称 `name` 和组件 `component`。然后，使用 `router.addRoute(routeToAdd)` 将该路由添加到路由器中。 请注意，`addRoute` 方法只能在路由器实例创建后调用，因此在使用之前请确保已经创建了路由器实例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值