router的 addRoute用法

J呀

已于 2023-02-09 14:20:12 修改

阅读量1.4k

点赞数 1

文章标签： vue.js Powered by 金山文档

于 2023-02-09 13:59:29 首次发布

本文链接：https://blog.csdn.net/hj_1520/article/details/128951631

版权

该方法用于向指定的父路由添加一个新的子路由记录。如果路由有name，并且已存在同名路由，原有的会被删除。新路由记录通过RouteRecordRaw对象定义，并使用parentName指定其父路由的位置。

摘要由CSDN通过智能技术生成

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

参数	类型	描述
parentName	string \| symbol	父路由记录，route 应该被添加到的位置
route	RouteRecordRaw	要添加的路由记录

需求：将新的路由添加为该路由的嵌套路由

写法：

如果不添加为任何路由的嵌套路由则

router.addRoute('',routerObj)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

J呀

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
router的 addRoute用法

router的addRoute使用
复制链接

扫一扫

addroute添加动态路由时踩的坑

qq_37254709的博客

03-25

7291

addroute添加动态路由时踩的坑添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。 name相同时会覆盖原有路由。这是vue官网原话那么path相同时呢先说结论： router.addroute在添加路由时，已有的路由规则表中如果含有path相同的路由时，则不会添加进路由规则表中，并且如果当前路由能匹配到path值name却不同时，会自动跳转当前路由到匹配的路由。起因是这样的。最近由于项目需求，要在顶部菜单里加一个能添加动态

react-router-cache-route:使用类似React-Router的缓存进行路由在Vue

05-11

安装npm install react-router-cache-route --save# oryarn add react-router-cache-route用法用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由）...

1 条评论您还未登录，请先登录后发表或查看评论

使用VueRouter的addRoutes方法实现动态添加用户的权限路由

10-16

主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

【vuejs】vue-router 之 addRoute 动态路由的应用总结

最新发布

工作的日常记录和平凡的生活分享

07-02

2942

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用。它与 Vue.js 深度集成，让开发者能够轻松地构建具有复杂用户界面的单页面应用。Vue Router 允许你定义不同的路由，并通过组件在应用中显示匹配的组件。Vue Router 的核心特性包括：Vue Router 的安装和基本使用步骤如下：对于 Vue 2，推荐使用 Vue Router 3.x 版本。可以通过 npm 或 yarn 进行安装： 1.2 项目中引入 Vue Router 在项目的入口文件（如 main.j

addRoute（）动态添加路由。

weixin_52310583的博客

07-22

2861

登录页面，点击登录，向后端接口发送api请求。后端根据用户名不同，返回不一样的菜单列表，触发mutation中的方法，设置路由，存储到本地localstorage中。再触发addMenu动态添加路由，component: () => import('@/views/User.vue')//路由按需加载。component: () => import('@/views/User.vue')//路由按需加载。meta: { title: '用户管理' },meta: { title: '用户管理' },

vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由

阿牛哥的博客

09-22

1万+

vue动态路由添加，vue-router的addRoute方法实现权限控制

Vue-Router(4) 学习之动态路由 addRoute

Raywh的博客

05-15

9147

前端动态路由：前端动态路由是指根据用户的操作或应用的状态变化，在前端代码中动态加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。addRoute 方法：在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。

vue-router 中router-view不能渲染的解决方法

12-08

最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。项目目录结构其中main.js import Vue from 'vue'; ...

my-addRoute

05-10

使用`this.$router.addRoute`方法将解析后的路由对象添加到当前的路由配置中。这会更新路由表，使得新的路由在应用中生效。需要注意的是，为了防止在路由切换时出现问题，通常会在应用启动后或者用户登录成功后进行...

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

11-26

这个方法允许我们在 Vue Router 实例创建后，即程序运行时动态添加新的路由。在用户登录成功后，我们可以从服务器获取用户的角色和对应的菜单权限，然后基于这些信息生成新的路由规则，并使用 `addRoutes` 添加到...

vue中router.addRoute用法

yinge0508的博客

03-25

1万+

addRoute 添加一条新的路由记录作为现有路由的子路由，如果路由有一个name, 并且已经有一个与之名字相同的路由，它会先删除之前的路由； addRoute(parentName: string | symbol, route: RouteRecordRaw): () => void parentName: 父路由记录，route应该被添加到的位置； route: 要添加的路由记录 addRoute(route: RouteRecordRaw): () => void route R

vue-router addRoute将子路由添加到指定路由下

weixin_45966674的博客

03-21

3666

addRoute的第一个参数接受一个字符串就是告诉它要插入到那个路由输入要切入路由的name。例如我们想在 name为layout的这个路由下加一条子路由就可以写。router.addRoute可以向vue路由中动态的添加路由信息。我们最开始的路由是这样的。但路由存在多层级关系。

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

Vue3---路由动态管理(router.addRoute())

web13618529112的博客

02-21

992

Vue2中，可以通过路由的addRoutes() 和 addRoute() 两种方法实现路由权限动态渲染，但在Vue3中，摒弃了addRoutes() 方法，只保留了addRoute() 单个添加路由配置的方法。 Vue2中路由对象 Vue3中路由对象 **Vue3动态添加路由：**在main.js中或者在登录回调中进行动态渲染路由。代码参考如下： const about = { //接口返回路由信息 path: ‘/about’, name: ‘About’, component: .

【VUE管理菜单权限】使用router.addRoutes

热门推荐

前端生活的爱恨情仇

11-08

3万+

最近项目迭代完成最后一版需要完成清尾工作。这里需要完成菜单的权限控制，最开始完成这项工作是吧所有的菜单都写到home模块，然后用v-if来判断菜单的显示。看Vue Router的API文档发现 router.addRoutes 函数签名： router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个...

Vue3---路由权限动态管理：router.addRoute()

无人之岛08的博客

03-22

5358

Vue2中，可以通过路由的addRoutes() 和 addRoute()两种方法实现路由权限动态渲染，但在Vue3中，摒弃了addRoutes() 方法，只保留了addRoute() 单个添加路由配置的方法。 Vue2中路由对象 Vue3中路由对象 Vue3动态添加路由：在main.js中或者在登录回调中进行动态渲染路由。代码参考如下： const about = { //接口返回路由信息 path: '/about', name: 'About', comp...

vue-router的addRoute方法实现权限控制

dreamingbaobei的博客

04-28

1万+

在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置，这里需要注意的是vue-router的options属性并不是响应式的，在添加（修改）路由规则后，router.options.routes属性不会改变，目前，如果需要更新router.options.routes，则需要手动更改。

【面试题】Vue2动态添加路由 router.addRoute()

LS_952754的博客

09-26

1041

【面试题】Vue2动态添加路由 router.addRoute()

vue router.addRoute具体用法

05-26

`router.addRoute` 是 Vue Router 中用来动态添加路由的方法。它可以在运行时动态地添加、修改和删除路由，而无需重新实例化路由器。具体用法如下： ```javascript router.addRoute(route: RouteConfig | RouteConfig[]) ``` 其中，`route` 参数可以是单个路由配置对象，也可以是一个包含多个路由配置对象的数组。例如，我们可以创建一个名为 `dynamic` 的路由，其路径为 `/dynamic`，并且该路由下有两个子路由，分别是 `dynamic1` 和 `dynamic2`，路径分别为 `/dynamic/1` 和 `/dynamic/2`，代码如下： ```javascript router.addRoute({ path: '/dynamic', name: 'dynamic', component: () => import('@/views/Dynamic.vue'), children: [ { path: '1', name: 'dynamic1', component: () => import('@/views/Dynamic1.vue') }, { path: '2', name: 'dynamic2', component: () => import('@/views/Dynamic2.vue') } ] }) ``` 我们还可以动态添加单个子路由，例如，我们可以在 `dynamic` 路由下添加一个名为 `dynamic3` 的子路由，路径为 `/dynamic/3`，代码如下： ```javascript router.addRoute('dynamic', { path: '3', name: 'dynamic3', component: () => import('@/views/Dynamic3.vue') }) ``` 需要注意的是，在使用 `router.addRoute` 方法时，我们需要确保路由已经被创建，否则会报错。因此，我们可以在路由创建完毕之后再动态添加路由。