Vue Router 实现动态路由的前端操作解析

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

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();
    }
});