vue router.addRoutes

时间: 2023-12-14 14:02:58 浏览: 73

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

此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题， 1.vue-router的实例，在new vue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限 2.路由规则与菜单的同步解决思路演化，菜单和路由同步，肯定是采用了vuex，一开在构建后台管理系统时，动态加载路由和菜单权限是常见的需求，尤其在权限管理精细到菜单级别时。Vue.js 框架提供了 Vue Router 和 Vuex 这样的工具来帮助我们实现这一功能。Vue Router 是 Vue.js 的官方路由库，用于管理应用的页面导航，而 Vuex 是一个专为 Vue.js 应用设计的状态管理模式，它集中存储和管理组件的状态，使得状态的改变变得可追踪和可预测。我们需要理解 Vue Router 的工作原理。在创建 Vue 实例时，Vue Router 会初始化并注册所有预定义的路由。在这个阶段，通常我们会设置基本的登录和错误处理（如 404 页面）路由。然而，由于此时用户尚未登录，我们无法确定其角色和相应的权限，这就导致了一个问题：如何动态地添加路由？解决这个问题的一个关键在于 Vue Router 提供的 `addRoutes` 方法。这个方法允许我们在 Vue Router 实例创建后，即程序运行时动态添加新的路由。在用户登录成功后，我们可以从服务器获取用户的角色和对应的菜单权限，然后基于这些信息生成新的路由规则，并使用 `addRoutes` 添加到现有的路由表中。为了实现这个功能，我们可以利用 Vuex 管理全局状态。在 Vue 应用启动时，先将登录和 404 页面的路由添加到 Vue Router 中。然后，当用户登录时，将登录信息和权限存储在 Vuex 的 store 中。在 `beforeEach` 路由守卫中，我们可以检查用户是否已登录，如果未登录则重定向到登录页面；如果已登录，我们可以使用 `addRoutes` 添加动态生成的权限路由。以下是一个简化的实现流程： 1. 在 `app.js` 中初始化 Vue Router，添加基础路由。 2. 在登录组件 `login.vue` 中，处理登录逻辑，成功后将用户信息和权限存入 session 或 Vuex。 3. 使用 Vuex 的 mutations 如 `ADD_MENU` 来存储权限菜单。 4. 使用 `router.addRoutes` 动态添加权限路由。 5. 在 `router.beforeEach` 中进行权限验证，确保未登录用户无法访问受保护的路由。示例代码片段： ```javascript // app.js import Vue from 'vue' import Router from 'vue-router' import store from './store' const router = new Router({ // 基础路由配置 }) // 在用户登录成功后调用 if (permission) { store.commit('ADD_MENU', permission) router.addRoutes(store.state.menu.items) } router.beforeEach((to, from, next) => { // ... }) // store.js export default new Vuex.Store({ state: { menu: { items: [] } }, mutations: { ADD_MENU(state, permission) { state.menu.items = permission } } }) // login.vue <template>  </template> <script> export default { methods: { handleSubmit() { // 登录成功后，调用 API 获取权限数据 const permission = fetchUserPermission() store.commit('ADD_MENU', permission) // 将权限路由添加到 Vue Router router.addRoutes(permission.routes) } } } </script> ``` 在上述流程中，`fetchUserPermission` 是一个假设存在的方法，用于从服务器获取用户权限信息。注意，为了避免安全问题，通常还需要在全局路由守卫中进行权限检查，防止用户绕过登录直接访问受保护的 URL。总结来说，结合 Vue Router 的 `addRoutes` 和 Vuex，我们可以有效地实现动态加载路由和菜单，从而实现基于用户角色的权限控制。这个方案既简单又灵活，能够适应后台管理系统中常见的权限管理需求。

`router.addRoutes` 是 Vue Router 提供的一个方法，用于动态添加路由规则。它的使用方法如下： ```javascript router.addRoutes(routes) ``` 其中，`routes` 是一个数组，包含需要添加的路由规则。每个路由规则应该是一个对象，包含以下属性： - `path`：路由路径，例如 `/home`。 - `component`：对应的组件，可以是一个组件选项对象，也可以是一个通过 `import` 导入的组件。 - `name`：路由名称，用于导航和编程式路由。 - `meta`：路由元信息，可以用于存储一些额外的信息，例如页面标题、权限控制等。使用 `router.addRoutes` 可以在运行时动态添加路由规则，这在需要根据用户权限或其他动态因素来生成路由时非常有用。

阅读全文

vue router.addRoutes

相关推荐

vue 解决addRoutes多次添加路由重复的操作

vue-router之解决addRoutes使用遇到的坑

vue router.addRoutes不生效

vue router.addRoutes()不生效

前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由

router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.

router.addRoutes

router.addroutes

router.addRoutes在vue-router@4版本中不被支持,那么用什么替代

前端vue权限管理(包含菜单权限和按钮权限),router.addroutes根据后台接口传递数据

router.addRoutes弃用，但是router.addRoute又不能用

router.addRoutes 动态添加路由原因解析

router.addRoutes已经被废弃了吗? 使用什么替代的

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

keepRouter:vue 解决vue-router的addRoutes刷新失效的问题(匹配不到跳转404)

vue-router addroutes TypeError: Cannot read properties of undefined (reading 'catch')

vue用addRoutes实现动态路由的示例

数学建模拟合与插值.ppt

[net毕业设计]ASP.NET教育报表管理系统-权限管理模块（源代码+论文）.zip

最新推荐

vue用addRoutes实现动态路由的示例

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

数学建模拟合与插值.ppt

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"

L1正则化模型诊断指南：如何检查模型假设与识别异常值（诊断流程+案例研究）