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

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 }

1. 路由重定向：
   通常情况下，进行路由重定向是为了将用户从一个路由导航到另一个路由。重定向可以用于在用户访问某个路由时，自动将其重定向到另一个指定的路由。

2. to 对象：
   在 Vue Router 中，to 对象代表着即将跳转的目标路由。它包含了目标路由的相关信息，如路径、参数等。

3. { …to, replace: true } 语法：
   在这个语句中，使用 { …to } 进行对象解构赋值，创建了 to 对象的一个浅拷贝。然后，通过添加 replace: true 属性，将 replace 设置为 true。

4. 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.children
      for (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）

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

总结（chatGpt）

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

2. Vue Router：
   Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。

3. addRoute 方法：
   在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。通过调用 router.addRoute(route) 方法，将动态生成的路由配置添加到路由器中，使其生效。

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

5. removeRoute 方法：
   如果动态添加的路由配置在权限变化或用户登出时需要移除，可以使用 removeRoute 方法。通过调用 router.removeRoute(name) 方法，根据路由名称移除现有的路由配置。

6. 路由重定向：
   路由重定向用于将用户从一个路由自动导航到另一个指定的路由。在 Vue Router 中，可以使用 return { …to, replace: true } 语句进行路由重定向，并使用替换导航模式进行路由跳转，以便在浏览器的历史记录中不会留下原始路由的记录。

综上所述，动态路由在 Vue Router 中的使用可以根据权限和其他条件动态地添加和删除路由配置，实现灵活的页面渲染和访问控制。同时，你也可以使用路由重定向来实现自动导航和替换导航模式，提供更好的用户体验。