智能网站建设系统营销推广活动策划

一.首先需要准备两个数组：

1.基础路由配置
2.所有可能的路由配置（包括嵌套路由）
 

// 基础路由配置
const routes = [{path: '/',name: 'Login',component: Login,meta: { title: '登录' } // 添加页面标题元数据},{path: '/all',name: 'all',component: () => import('@/components/all.vue'),children: [] // 初始时子路由为空，后续动态添加}
];// 所有可能的路由配置（包括嵌套路由）
const allPossibleRoutes = [{path: '/home',name: 'Home',component: () => import('@/views/Home.vue'),meta: { title: '首页', requiresAuth: true, role: ['*'] }},{path: '/control',name: 'Control',component: () => import('@/views/Control.vue'),meta: { title: '菜单管理', requiresAuth: true, role: ['2'] }},{path: '/role',name: 'Role',component: () => import('@/views/Role.vue'),meta: { title: '角色管理', requiresAuth: true, role: ['1'] }},{path: '/nested',name: 'Nested',component: () => import('@/views/Nested.vue'),meta: { title: '嵌套页面', requiresAuth: true, role: ['1', '2'] },children: [{path: 'subpage1',name: 'SubPage1',component: () => import('@/views/SubPage1.vue'),meta: { title: '子页面1', requiresAuth: true, role: ['1'] }},{path: 'subpage2',name: 'SubPage2',component: () => import('@/views/SubPage2.vue'),meta: { title: '子页面2', requiresAuth: true, role: ['2'] }},{path: 'subpage3',name: 'SubPage3',component: () => import('@/views/SubPage3.vue'),meta: { title: '子页面3', requiresAuth: true, role: ['1', '2'] },children: [{path: 'subsubpage1',name: 'SubSubPage1',component: () => import('@/views/SubSubPage1.vue'),meta: { title: '子子页面1', requiresAuth: true, role: ['1'] }}]}]}
];

二.创建路由实例
 

// 创建路由实例const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: routes});

三.获取本地存储的 role(用于根据用户角色判断哪个页面显示)

// 获取本地存储的 role
const role = sessionStorage.getItem('role');
console.log('本地存储的 role:', role);

四.递归处理多维数组（嵌套路由）的权限过滤,并添加新路由

const filterNestedRoutes = (routes, role) => {return routes.map(route => {const newRoute = { ...route };const requiredRoles = newRoute.meta?.role || [];if (requiredRoles.includes('*') || requiredRoles.includes(role + '')) {if (newRoute.children && newRoute.children.length > 0) {newRoute.children = filterNestedRoutes(newRoute.children, role);}return newRoute;}return null;}).filter(route => route !== null);
};// 权限过滤方法
const filterRoutes = (routes, role) => {console.log('全部的路由', routes);return filterNestedRoutes(routes, role);
};// 过滤并添加新路由
const allowedRoutes = filterRoutes(allPossibleRoutes, role);
allowedRoutes.forEach(route => {if (route.children && route.children.length > 0) {// 如果有子路由，先添加父路由router.addRoute('all', route);route.children.forEach(childRoute => {router.addRoute(route.name, childRoute);});} else {router.addRoute('all', route);}
});
console.log(allowedRoutes);
sessionStorage.setItem('allowedRoutes', JSON.stringify(allowedRoutes));

五.添加路由守卫
 

router.beforeEach((to, from, next) => {const requiredAuth = to.meta?.requiresAuth;const requiredRoles = to.meta?.role || [];if (requiredAuth &&!role) {// 如果需要认证且没有角色信息，重定向到登录页面next('/');} else if (requiredAuth && role &&!requiredRoles.includes('*') &&!requiredRoles.includes(role + '')) {// 如果需要认证且角色不匹配，重定向到登录页面next('/');} else {next();}
});