Vue学习笔记 —— router.addRoutes

最新推荐文章于 2024-07-02 20:30:00 发布
最新推荐文章于 2024-07-02 20:30:00 发布
阅读量2.4k 收藏 9
点赞数 1
分类专栏： Vue.js学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43340295/article/details/112135579
版权
本文介绍了Vue的`router.addRoutes`方法用于动态添加路由规则。通过代码示例展示了如何进行基本使用，并探讨了其在路由权限验证中的应用，特别是在处理不同角色用户访问权限场景下的实践方法。
摘要由CSDN通过智能技术生成

router.addRoutes

router.addRoutes(routes: Array)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

但什么是更多动态规则？符合routes选项的要求的数组又长什么样？
下面用代码来解释：

基本使用:

现在我们有一个非常普通的路由：

const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: Home
  },
{
   
  path: '/Other',
  name: 'Other',
  component: Other,
}
]
const router = new
最低0.47元/天 解锁文章
莫非C
关注
专栏目录
简单理解Vue权限路由通过router.addRoutes实现
qq_42242976的博客
07-28 1409
首先创建页面A和页面B和404，假设A是不需要权限的页面，而B是需要有权限才能访问的页面,只有登录后的账户有权限才能访问 在router中的index.js中配置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) export let homeRouter = [{ path: '/', ...
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
12-11
最近做vue 单页项目涉及到多角色用户权限问题，不同的角色用户拥有不同的功能权限， 不同的功能权限对应的不同的页面 git: https://github.com/pch1024/dynamicRouter 举个例子： 角色A =>功能1 =>功能2 =>功能3 角色B =>功能1 =>功能4 =>功能5 第1步 定义默认路由和动态路由 //动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个，防君子不防小人) export const dynamicRouter = [ { path: '/b', name: 'b'
【vuejs】vue-router 之 addRoute 动态路由的应用总结
最新发布
工作的日常记录和平凡的生活分享
07-02 4250
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
关于vue-router当中addRoutes的使用
qq_36001325的博客
08-25 4723
关于addRoutes 使用背景 ： 权限控制，判断用户是否有该页面的权限，可以使用router.addRoutes([设置路由])； 优点：当用户没有权限，在浏览器输入地址不会出现该页面，直接跳转到配置的404页面； /* 默认初始路由 */ export default new Router({ routes: [ { path: '/login', component: Login } ] }) /* 准
【vue】vue router.addRoutes简单应用及个人理解
Meditation_Crazy
01-06 496
前言 转载自：https://www.cnblogs.com/yzyh/p/10341130.html
vue-router之addRoutes（动态路由/权限路由）使用分析
热门推荐
it_lin_web的博客
03-04 1万+
// 1 设置默认路由 // 2 由登录获取权限路由（动态路由） // 要存储routes数据 -- 防止刷新时数据丢失--刷新时要重新动态渲染路由 var routes sessionStorage.setItem('routes', JSON.stringify(routes)) // 3 调用方法router.addRoutes（routes）routes要符合路由规则 routes....
Vue-router:11、addRoutes动态路由添加
tinglis的博客
03-04 914
Vue-router:11、addRoutes动态路由添加 在前面的案例中，我们都是将路由定义好，然后通过路由守卫来判断，某个用户是否登录，从而决定能否访问某个路由规则对应的组件内容。 但是，如果某些路由规则只能用户登录以后才能够访问，那么我们也可以不用提前定义好，而是在登录后，通过addRoutes方法为其动态的添加。 首先这里需要，还需要全局的路由守卫来进行校验判断，只不过这里全局路由守卫的逻辑发生了变化。 router.beforeEach((to, from, next) => {
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
Vue项目关于router.addRoutes 刷新白屏解决方案
weixin_46759393的博客
09-13 1257
直接贴代码 这是一个简单例子权限路由是Table 注意最后那个{ path: '*', redirect: '/404', hidden: true } 这个不能一开始就导入路由,要放到addRoutes里面. 如果一开始就导入的话,刷新页面,router会找不到动态路由Table组件,因为这个时候并没有添加进来,router会直接重定向404 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../view
【项目复盘-vue2.0】router.addRoutes 报错TypeError: routes.forEach is not a function
Weiqian_的博客
08-02 6458
router.addRoutes 报错TypeError: routes.forEach is not a function
vue-addRoutes
05-30
项目结构 mock:node.js搭建的模拟数据的小服务 myProject:vue项目。登录权限设置，根据角色，动态添加路由 #启动mock： 进入mock目录后 npm install npm start #启动 myProject npm install npm run dev #用户名 密码 角色1 : 123 a123456 角色2 : 456 a123456 #2019.5.30更新 这种权限路由拼接的方式，灵活度太低，不适用复杂点的项目，只适合练习。 目前项目采用：页面路由meta上加参数权限id,在beforeEach上根据用户权限id集合判断。
vue-router之解决addRoutes使用遇到的坑
10-15
主要介绍了vue-router之解决addRoutes使用遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE 路由权限验证router.addRoutes
weixin_43550562的博客
03-27 475
文档解释 router.addRoutes 函数签名： router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 基本使用: const routes = [ { path: '/', name: 'Home', component: Home } ] const router = new VueRouter({ routes }) export default router 上面为普通路
vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
qq_31906983的博客
04-06 1万+
工作中我们经常会遇到这种需求，后台定义用户的权限数据，前端进行获取，并渲染在侧边栏导航上，不同权限的用户看到的侧边栏是不同的。即前端渲染的数据是随着后台的改变而改变的，做到真正的前后端分离。 一、拿到需要动态添加的路由表 我们的思路是： 登录(login，所有人均可见)--------->登录成功，获取权限-------->权限不同，侧边栏的数据展示不同 先定义一份公共的路由表...
vue使用router.addRoutes实现动态路由配置
BluerCat的博客
05-18 2198
动态路由配置
前端权限控制（二）：VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制
zhufan2333的博客
08-12 3187
登陆成功之后直接由后端返回异步路由表，然后前端直接通过addRoutes方法进行添加，并且生成侧边栏。大致步骤：1.拦截路由2.取到后台路由数据3.添加并且保存路由（VUEX）。因为后台传回的组件路径‘component’是字符串，所以要把加载组件的过程 封装成一个方法，因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成对象。 要注意的是Layout组件需要特殊处理。Layout 是架构组件，不在后台返回，在文件里单独引入............
vue router.addRoutes
05-01
`router.addRoutes` 是 Vue Router 提供的一个方法，用于动态添加路由规则。 它的使用方法如下： ```javascript router.addRoutes(routes) ``` 其中，`routes` 是一个数组，包含需要添加的路由规则。每个路由规则应该是一个对象，包含以下属性： - `path`：路由路径，例如 `/home`。 - `component`：对应的组件，可以是一个组件选项对象，也可以是一个通过 `import` 导入的组件。 - `name`：路由名称，用于导航和编程式路由。 - `meta`：路由元信息，可以用于存储一些额外的信息，例如页面标题、权限控制等。 使用 `router.addRoutes` 可以在运行时动态添加路由规则，这在需要根据用户权限或其他动态因素来生成路由时非常有用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值