Vue 项目中基于后端权限的动态路由实现

首先页面需要准备三个数组：基础路由，完整路由，模拟接口数据
1. 基础路由也就是静态路由（只有基本页面配置，不包含动态路由的组件。也是接下来用于注册页面的数组）

// 基础路由（只有基本页面配置，不包含动态路由的组件）
const baseRoutesWithoutComponents = [{path: '/',name: 'login',component: () => import("@/views/Login.vue")},{path: '/404',name: '404',component: () => import('@/views/notFound.vue')},{path: '/layout',name: 'layout',component: () => import('@/components/all.vue'),children: [] // 初始为空，动态路由将添加到这里}
];

2.完整路由配置（包含所有可能的页面组件。不能注册这个）

// 完整路由配置（包含所有可能的页面组件）
const baseRoutesWithComponents = [{path: '/',name: 'login',component: () => import("@/views/Login.vue")},{path: '/404',name: '404',component: () => import('@/views/notFound.vue')},{path: '/layout',name: 'layout',component: () => import('@/components/all.vue'),children: [{path: '/home',name: '首页',id: 1,pid: 0,component: () => import('@/views/homeView.vue')},{id: 2,pid: 0,redirect: null,path: '/comp',name: '门诊',component: () => import('@/views/outpatientView.vue'), // 添加父级组件children: [{id: 3,pid: 2,redirect: null,component: () => import('@/views/payView.vue'),path: "/pay",name: "门诊缴费记录",children: [{id: 13,pid: 3,redirect: null,component: () => import('@/views/payDetailView.vue'),path: "/pay/detail",name: "具体缴费明细"}]},{id: 4,pid: 2,redirect: null,component: () => import('@/views/reservationView.vue'),path: "/reservation",name: "预约记录"}]},{id: 8,pid: 0,path: '/hospital',name: '住院',component: () => import('@/views/hospitalParentView.vue'), // 添加父级组件children: [{id: 9,pid: 8,redirect: null,component: () => import('@/views/hospitalView.vue'),path: "/hospitalpay",name: "住院缴费记录"},{id: 10,pid: 8,redirect: null,component: () => import('@/views/roomView.vue'),path: "/room",name: "房间管理"},{id: 11,pid: 8,redirect: null,component: () => import('@/views/inpatientView.vue'),path: "/inpatient",name: "住院人"}]}]}
];

3.这个数组是模拟接口返回的数据（不包含component）

// 动态路由配置（权限过滤后的结构）
const dynamicRouteConfigs = [{path: '/home',name: '首页',id: 1,pid: 0},{id: 2,pid: 0,redirect: null,path: '/comp',name: '门诊',children: [{id: 3,pid: 2,redirect: null,path: "/pay",name: "门诊缴费记录",children: [{id: 13,pid: 3,redirect: null,path: "/pay/detail",name: "具体缴费明细"}]},{id: 4,pid: 2,redirect: null,path: "/reservation",name: "预约记录"}]},{id: 8,pid: 0,path: '/hospital',name: '住院',children: [{id: 9,pid: 8,redirect: null,path: "/hospitalpay",name: "住院缴费记录"},{id: 10,pid: 8,redirect: null,path: "/room",name: "房间管理"},{id: 11,pid: 8,redirect: null,path: "/inpatient",name: "住院人"}]}, {path: '/message',name: '住院人信息',id: 12,pid: 0},
];

注册静态路由

// 创建路由实例，只注册静态路由
const router = createRouter({history: createWebHistory(),routes: baseRoutesWithoutComponents
});

数据处理

// 改进的权限过滤方法，支持多维数组（嵌套路由）
const filterRoutes = (dynamicRouteConfigs, allRoutes) => {// 递归查找匹配的路由const findMatchedRoute = (routes, target) => {for (const route of routes) {// 匹配条件：name和path都相同if (route.name === target.name && route.path === target.path) {return route;}// 如果有子路由，递归查找if (route.children) {const matchedChild = findMatchedRoute(route.children, target);if (matchedChild) return matchedChild;}}return null;};// 递归处理路由配置const processRoutes = (routes) => {return routes.map(route => {// 查找匹配的路由配置const matchedRoute = findMatchedRoute(allRoutes, route);if (!matchedRoute) return null;// 创建新的路由配置const newRoute = {...route,component: matchedRoute.component,redirect: matchedRoute.redirect || null};// 递归处理子路由if (route.children && route.children.length > 0) {newRoute.children = processRoutes(route.children);}return newRoute;}).filter(route => route !== null);};return processRoutes(dynamicRouteConfigs);
};

将处理后的数据添加到静态路由

// 动态添加路由到 layout
const addDynamicRoutes = (roles) => {// 清空已有动态路由const layout = router.getRoutes().find(r => r.name === 'layout');if (layout) {layout.children.forEach(child => {router.removeRoute(child.name);});}// 过滤并添加新路由const allowedRoutes = filterRoutes(dynamicRouteConfigs, baseRoutesWithComponents);allowedRoutes.forEach(route => {router.addRoute('layout', route);});// 存储路由信息sessionStorage.setItem('menuPath', JSON.stringify(allowedRoutes));sessionStorage.setItem('menuName', JSON.stringify(router.getRoutes()));// 确保 404 最后处理router.addRoute({path: '/:pathMatch(.*)*',redirect: '/404'});console.log('动态路由添加完成:', allowedRoutes);
};// 示例调用（实际使用时应该根据用户权限调用）
addDynamicRoutes();