vue3实现动态路由

场景：现场有菜单编辑等功能，可以修改菜单的路径、名称、层级关系。就导致菜单变化后，前端需要在router.js文件手动配置新的对应路由，非常麻烦;
方案：使用动态路由自动匹配变更的菜单路由；使用vue-router4实现动态路由，达到后端配置菜单的路由标识，后端可随意变更菜单层级和路径，前端根据标识的component路径动态匹配路由找到前端路径文件；
拓展：动态权限也是类似方案，通过后端返回路径信息，前端使用动态路由处理

一、基础信息

1.路由构成

• 整体路由 = 基础路由 + 动态路由 + 404类路由
  • 基础路由：包含 /login、/详情类、/基础路径路由
  • 动态路由：包含根据登录成功后返回的菜单配置路由生成动态路由、待特殊处理的动态路由
  • 404类路由：包含/404、/403、/:pathMatch(.*)
  • 注意点：动态路由逻辑需要添加在404类路由前，否则刷新浏览器会导致找不到动态路由而报错

2.菜单配置表

• 后端提供了一个菜单配置表，在里面可以配置菜单的ID、菜单名称、菜单地址栏路径url、父级ID、标识。
• 菜单配置表同系统页面里的菜单管理页面一样，可以修改菜单的上述这些信息。
• 目的：登录成功后，后端的登录接口会返回该用户对应的菜单配置信息和标识

重点 | 重点 | 重点

标识：标识字段维护的就是这个菜单路径所对应的前端component文件路径。当该条菜单的名称、路径、层级无论如何变化，前端都负责将该路径匹配到标识对应的页面上。即可实现路由路径变化，页面内容正常匹配，即动态路由。

3.vue-router4方法

添加权限(动态路由)： 使用router.addRoute()方法将拥有权限的动态路由添加到路由表系统中
删除权限(动态路由)： 使用router.removeRoute(name)方法删除动态路由
判断路由是否存在：使用router.hasRoute(to.name)方法判断路由name是否存在

二、实现思路

1.登录获取菜单配置表

用户登录成功后，登录接口可以拿到有具体component标识的树状层级菜单信息，存入pinia的permissionList字段下，用于渲染页面导航栏和侧边栏。同时拍平一份存入flatPermissionList，方便后期遍历生成前端动态路由

2.导航守卫

在导航守卫router.beforeEach中，使用router.hasRoute(to.name)判断是否存在当前路由
有：则进入正常逻辑和next()
无：需要先走动态路由添加逻辑，手动将该路由生成动态路由添加，在进入正常逻辑和next()
退出：需要清除动态路由

3.添加动态路由

动态路由：将后端返回的拍平的菜单信息flatPermissionList，进行遍历。找到标识的值即component路径（我们后端使用flag字段做标识字段，字段无所谓，重要的是具体vue文件路径），结合菜单名称、路径等信息，组装成动态路由，再使用遍历router.addRoute()一次性添加所有动态路由；

待特殊需要处理的动态路由：例如有些路由需要特殊meta配置meta: { title: "标题", inlayout: false, needAside: false }，由于后端返回的菜单信息只有路径、名称、标识信息无法满足meta里的inlayout等配置；所以需要在本地有个dynamicRouter.js文件，维护一个需要待特殊处理的路由信息，根据标识去匹配获取。

404类路由：同时记得添加动态的404类路由。

注意：添加动态路由，需要在meta里添加一个标记字段isDynamic，用于标记是动态路由。
目的：后期退出时候需要删除动态路由

4.渲染菜单

使用pinia里的层级菜单信息permissionList，渲染导航栏和侧边栏；
注意：不能使用router.options来获取所有的路由渲染菜单，因为该方法不能获取到动态路由

5.退出登录删除动态路由

用户退出登录时需要删除动态路由(权限)，因为如果退出登录时不删除动态路由(权限)，紧接着登录其他权限不同的用户，该用户没有上一个用户所拥有的权限，所以无法查看上一个用户所看到的菜单以及页面，但是该用户可以使用浏览器的回退功能或者修改url地址栏的路径从缓存中去访问上一个用户能访问的页面，这样该用户就可以访问到不属于自己权限的页面，所以在用户退出登录时需要删除动态路由(权限)，来保证权限的准确性。删除动态路由使用到router.removeRoute()，根据之前的标记字段isDynamic删除

三、实现代码

1.路由守卫

/src/router/index.js
作用： 拦截当前路由，判断是否有该动态路由及删除动态路由

import { resetDynamicRoutes } from '@/utils/routeManager' // 删除动态路由方法
import { createRouter, createWebHashHistory } from "vue-router"
import staticRoutesDefault from "./staticRoutesDefault"
import constantRoutes from "./constantRoutes"
import useStore from "@/store/index.js"import { setComponent } from "./setRouter" // 动态路由设置方法const router = createRouter({history: createWebHashHistory(),routes: [...staticRoutesDefault, ...constantRoutes] // 初始这里仅有/login /详情 等基础路由 不包含动态路由 不包含404类路由
})router.beforeEach(async (to, _from, next) => {const { userStore } = useStore()// -------------------------动态路由判断逻辑-------------------------// 退出到登录页 时候需要清除动态路由，否则下一个用户可以通过地址栏拼接方式 使用上一个用户的路由 菜单权限不严谨if (to.path === '/login' || to.name === 'login' || to.path === '/' || to.name === 'sso') {// 清理动态路由resetDynamicRoutes(router)}try {// 1. 检查路由是否存在const routeExists = router.hasRoute(to.name || to.path)console.log('%c【' + '检查路由是否存在' + '】打印', 'color:#fff;background:#0f0', to.name, to.path, routeExists)// 2. 不存在的话去添加if (!routeExists) {// 添加动态路由const addIsSuccessful = setComponent(router)if (addIsSuccessful) {return next({ ...to, replace: true })}}} catch (error) {console.log(error)}// -------------------------动态路由判断逻辑-------------------------// 正常的其他逻辑const token = sessionStorage.getItem("Authorization") || ""let permissionList = [...userStore.flatPermissionList.map(item => item.permissionUrl)]if (!token) {next("/login")} else {if (permissionList.includes(to.path)) {next()} else {next("/403")}}
})export default router

2.基础路由文件

这部分可以不看，就是一些除了动态路由外的基础路由配置

/src/router/constantRoutes.js
存放登录路由

const constantRoutes = [{path: "/",name: "sso",component: () => import("@/views/login/sso/index.vue"),meta: {inlayout: false}},{path: "/login",name: "login",component: () => import("@/views/login/normal/index.vue"),meta: {title: "登录",inlayout: false}},
]
export default constantRoutes

/src/router/staticRoutesDefault.js
存放基础路由、详情路由、系统管理路由

export default [{path: "/assetManagement/ipManagement/lanIPManagement/lanIPApproval/:type/:process",name: "LanIPApproval",meta: { title: "局域网IP流程申请" }, // 基础component: () => import("@/views/assetManagement/ipManagement/lanIPManagement/lanIPApproval/index.vue"),beforeEnter: to => {if (to.params.type == "view") {to.meta.title = "局域网IP流程查看"to.matched[to.matched.length - 1].meta.title = "局域网IP流程查看"} else if (to.params.type == "deal") {to.meta.title = "局域网IP流程审批"to.matched[to.matched.length - 1].meta.title = "局域网IP流程审批"} else {to.meta.title = "局域网IP流程申请"to.matched[to.matched.length - 1].meta.title = "局域网IP流程申请"}}},{path: "/securityManagement",name: "SecurityManagement",meta: { icon: "VideoCamera", title: "安全管理" },children: [{path: "versionManagement",name: "VersionManagement",meta: { title: "版本管理" },component: () => import("@/layout/layRouterview.vue"),children: [{path: "problemVersionDevice",name: "ProblemVersionDevice",meta: { title: "查看设备" }, // 基础component: () => import("@/views/securityManagement/versionManagement/problemVersion/viewDevice.vue")},]},]},{path: "/systemManagement",name: "SystemManagement",meta: { icon: "VideoCamera", title: "系统管理" },children: [{path: "menuManagement",name: "MenuManagement",meta: { title: "菜单管理" },component: () => import("@/views/systemManagement/menuManagement/index.vue")},{path: "roleManagement",name: "RoleManagement",meta: { title: "角色管理" },component: () => import("@/views/systemManagement/roleManagement/index.vue")},]}
]

3.添加动态路由逻辑

/src/router/setRouter.js

注意：

• 动态路由使用router.addRoute()添加，需要加一个动态路由isDynamic标识，方便删除
• 动态路由添加后，需要使用next({ ...to, replace: true })才能导航成功
• component要使用import.meta.glob的路径引入

import dynamicRouterList from "./dynamicRouter" // 待特殊处理的路由配置表
import routes404 from "./routes404" // 404页面路由
import useStore from "@/store/index.js"// 使用后端返回的权限列表拍平后的结果和标识找到动态路由（可以一次性塞入所有的动态路由）
export const useMarkFindAllRouter = () => {const modules = import.meta.glob(['../views/*/*.vue','../views/*/*/*.vue'])let allList = []const flatPermissionList = useStore().userStore.flatPermissionList // 后端返回的权限列表拍平后的结果console.log('%c【' + 'flatPermissionList拍平' + '】打印', 'color:#fff;background:#0f0', flatPermissionList)flatPermissionList.forEach(ele => {if (ele.flag) { // flag就是后端配置表里的标识字段 返回的是component地址let dynamicJavaRouter = {...ele,name: 'Name' + ele.flag + '_' + ele.id, // 注意自定义组件的name 保持不重复 判断是否存在路由时候用meta: { title: ele.permissionName }, // 配置基础metacomponent: modules[`..${ele.flag}.vue`], // 注意component要使用import.meta.glob的路径path: ele.permissionUrl, // 注意path要使用后端返回的导航栏的path}  // 组装动态路由allList.push(dynamicJavaRouter)}})// 如果你的meta不需要特殊处理就不需要此逻辑for (let index = 0; index < dynamicRouterList.length; index++) {const element = dynamicRouterList[index];for (let i = 0; i < allList.length; i++) {const ele = allList[i];if (ele.flag === element.markId) {ele.meta = element.meta // 根据标识和待特殊处理的路由配置表 匹配 找到后赋值特殊的meta信息}}}return allList
}
// 添加动态路由
export const setComponent = (router) => {console.log('添加动态路由')const dynamicRoutesAllList = useMarkFindAllRouter()// 根据标识或者路径找到对应动态路由dynamicRoutesAllList.forEach(route => {router.addRoute({...route,meta: { ...route.meta, isDynamic: true } // 标记动态路由})// router.options.routes.push(dynamicRoutes)})// 添加404路由routes404.forEach(ele => router.addRoute({...ele,meta: { ...ele.meta, isDynamic: true } // 标记动态路由}))return true
}

4.待特殊处理路由配置表

/src/router/dynamicRouter.js
目的：获取特殊的meta信息

// 根据标识 找到对应的component（建议使用 markId 标识，而不是路径path，这样现场可以随意变动path名称和层级。只需要标识不变即可）
// 注意这里的路由component和markId，其实是和后端菜单配置表里的值一致；只不过这里都是处理特殊meta值用的export default [{path: "/abcd", // 此路径不用，使用动态路径name: "Abcd", // 此name不用，使用动态namemarkId: '/views/assetManagement/ipManagement/mainSiteManagement/mainSiteAddressApplication/index', // 这里就是后端菜单配置表里的标识 值 即component路径meta: { title: "菜单标题", inlayout: false, needAside: false }, // 目的获取特殊的meta信息component: () => import("@/views/assetManagement/ipManagement/mainSiteManagement/mainSiteAddressApplication/index.vue")},
]

5.404类路由

/src/router/routes404.js
注意：404类的路由也要使用动态路由方式添加，而且必须在其他的动态路由添加后再添加404类路由；否则可能导致退出后切换别的角色登录或刷新时候动态路由直接到404页面

const constantRoutes = [{path: "/404",name: "404",component: () => import("@/views/common/404.vue"),meta: {title: "404",inlayout: false}},{path: "/403",name: "403",component: () => import("@/views/common/403.vue"),meta: {title: "403",inlayout: false}},{path: "/:pathMatch(.*)",name: "error",redirect: "/404",meta: {title: "错误",inlayout: false}}
]
export default constantRoutes

6.删除动态路由

/src/utils/routeManager.js
目的：退出时候删除动态路由；否则切换个角色登录会导致直接到404页

// 新增清除动态路由方法
export const resetDynamicRoutes = (router) => {// 清除所有动态路由router.getRoutes().forEach(route => {if (route.meta?.isDynamic) {router.removeRoute(route.name)}})// 清除404路由（根据实际情况调整）// router.removeRoute('error')// router.removeRoute('404')// router.removeRoute('403')
}