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

前端动态路由

在前端开发中，动态路由指的是根据用户的操作或应用的状态变化，动态地加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。

Vue Router

Vue Router 是 Vue.js 的官方路由库，提供了动态路由的支持。通过在 Vue 实例中配置路由表，可以定义路由路径和组件的映射关系，实现动态加载和切换不同的页面组件

router: 路由器对象,包括导航函数和路由规则。
route: 当前路由对象,代表当前激活的路由。

通过监听 URL 的变化，匹配对应的路由规则，并渲染相应的组件。

为什么需要

路由权限：根据用户的身份、角色或权限级别来控制对特定路由或页面的访问权限。
通过路由权限控制，你可以确保只有经过授权的用户才能访问特定的路由或页面，提高应用的安全性和保护用户数据。
其实应该后端增加校验的

添加路由

1.路由配置

和普通的路由定义相同，需要 path，name，component等，即路由记录(RouteRecord)
例如

// 基础路由
import { createRouter, createWebHistory } from 'vue-router'import { private_routes } from './menuRoutes'
// 定义登录前的可使用路由
const constant_routes = [{path: '/login',name: 'Login',component: () => import('@/views/Login/index.vue')},{path: '/404',component: () => import('@/components/error-page/404.vue'),},{ path: '/:pathMatch(.*)*', name: 'NotFound', redirect: '/404' },]const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: private_routes.concat(constant_routes)
})export default router
// 动态路由
export const dynamic_routes = [{path: '/user_setting',component: Layout,redirect: '/user_setting/index',name: 'MyUserSetting',children: [{path: '/user_setting/index',name: 'UserSetting',meta: { title: '权限管理', icon: Setting },component: () => import('../views/UserSetting/index.vue')}]}
];

2.动态路由注册

需要判断权限，根据需要去筛选需要添加的路由数组。
即把动态路由添加到路由器对象（router），需要使用addRoute方法

import { dynamic_routes } from '@/router/menuRoutes'router.beforeEach(async (to) => {// ...省略其他逻辑if (requiresAuth) {// 根据对应权限，增加for (let i = 0; i < dynamic_routes.length; i++) {const route = dynamic_routes[i];router.addRoute(route) // Add the route to }return { ...to, replace:true } // 路由重定向}
})

提示
return { …to, replace: true }

路由重定向：
通常情况下，进行路由重定向是为了将用户从一个路由导航到另一个路由。重定向可以用于在用户访问某个路由时，自动将其重定向到另一个指定的路由。
to 对象：
在 Vue Router 中，to 对象代表着即将跳转的目标路由。它包含了目标路由的相关信息，如路径、参数等。
{ …to, replace: true } 语法：
在这个语句中，使用 { …to } 进行对象解构赋值，创建了 to 对象的一个浅拷贝。然后，通过添加 replace: true 属性，将 replace 设置为 true。
replace: true 的作用：
设置 replace: true 的目的是在进行路由跳转时，使用替换导航模式。这意味着新的路由将替换当前的路由，并在浏览器的历史记录中不会留下原始路由的记录。这样做的好处是，当用户在浏览器的回退按钮上点击时，不会回退到原始路由，而是跳过原始路由，直接回退到前一个路由。

通过使用 return { …to, replace: true }，你可以在路由添加完成后立即执行路由重定向，并且使用替换导航模式进行路由跳转。这样可以确保用户在进行路由跳转时，浏览器的历史记录能够正确地维护，并且用户在使用回退功能时能够按预期返回到前一个路由。

思考：是否可以使用next参数

路由导航

路由表渲染，路由的导航栏，或者菜单栏的导航实例（不需要导航栏可以不用）

// 判断动态路由是否需要添加
const routes = computed(() => {if (requiresAuth) return private_routes.concat(dynamic_routes)return private_routes
})

思考：是否可以合并为一个方法

删除路由

为什么需要：因为权限会随着用户的权限而变化，如果登出（切换权限）时不删除，可能会将没有的权限给带到不允许的页面
使用方法：removeRoute

  // 删除动态添加的路由const resetDynamicRoutes = () => {const dynamicRoutes = [...dynamic_routes]for (let i = 0; i < dynamicRoutes.length; i++) {const p_route = dynamicRoutes[i];const children = p_route.childrenfor (let j = 0; j < children.length; j++) {const child = children[j]if (child.name && router.hasRoute(child.name)) {router.removeRoute(child.name)}}if (p_route.name && router.hasRoute(p_route.name)) {router.removeRoute(p_route.name)}}}

removeRoute: 根据其名称移除一个现有的路由

补充（Claude）

动态路由的定义实际上和普通路由没有区别,只是动态添加和删除。路由记录的定义是相同的。
addRoute方法是Vue Router提供的API,用于动态添加路由。并不是路由定义本身的一部分,需要在适当的时机调用。
return { …to, replace: true } 的作用是进行路由替换,这确保在动态添加路由后,浏览器的历史记录是正确的。你的理解是完全正确的。
可以将路由添加和删除封装到同一方法中,在适当时机进行判断。这可以提高代码的可重用性和可读性。
next 确实也可以用于动态路由场景。我们可以在 router.beforeEach 中根据不同情况调用 next() 或 next(‘/path’) 进行不同的导航操作。
您对删除动态路由的理解也是完全正确的。在权限变化时(如登出)删除动态路由是必要的,否则会导致未授权访问。

总结（chatGpt）

前端动态路由：
前端动态路由是指根据用户的操作或应用的状态变化，在前端代码中动态加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。
Vue Router：
Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。
addRoute 方法：
在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。通过调用 router.addRoute(route) 方法，将动态生成的路由配置添加到路由器中，使其生效。
路由权限：
路由权限用于根据用户的身份、角色或权限级别来控制对特定路由或页面的访问权限。通过路由权限控制，你可以确保只有经过授权的用户才能访问特定的路由或页面，提高应用的安全性和保护用户数据。
removeRoute 方法：
如果动态添加的路由配置在权限变化或用户登出时需要移除，可以使用 removeRoute 方法。通过调用 router.removeRoute(name) 方法，根据路由名称移除现有的路由配置。
路由重定向：
路由重定向用于将用户从一个路由自动导航到另一个指定的路由。在 Vue Router 中，可以使用 return { …to, replace: true } 语句进行路由重定向，并使用替换导航模式进行路由跳转，以便在浏览器的历史记录中不会留下原始路由的记录。