管理系统通常会根据账号设置对应角色，每个不同角色有着不同的路由权限；通过接口返回账号路由权限进行匹配重新配置路由。

首先我们引入动态路由组件，一定要引入组件，不然vite打包会忽略组件不打包

import {createRouter,createWebHistory,useRoute} from 'vue-router'
//
//动态路由数据
const dynamicsRouters = [
    {
        path:'/atc',
        name:'atc',
        meta:{
            title:'文章管理'
        },
        children:[
            {
                path:'/atc/atcList',
                name:'atcList',
                meta:{
                    title:'文章列表'
                },
                component:()=> import('../views/atc/atcList.vue')
            },
            {
                path:'/atc/atcCategory',
                name:'atcCategory',
                meta:{
                    title:'文章分类'
                }, 
                component:()=> import('../views/atc/atcCategory.vue')
            }
        ]
    },
    ...
]
//重定向路由
const redirectRouter = {
    path:'/home',
    name:'home',
    meta:{
        title:'看板'
    },
    component:()=> import('../views/home/home.vue')
}
//静态路由数据
const routes = [
    {
        path:'/login',
        name:'login',
        meta:{
            title:'用户登录'
        },
        component:()=> import('../views/login.vue'),
    },
    {
        path:'/',
        name:'main',
        meta:{
            title:'首页'
        },
        component:()=> import('../views/Main.vue'),
        redirect:'/home'
    },
    {
	    path: '/:pathMatch(.*)*',
	    component: () => import('@/views/error/404.vue')
	}
]

export const router = createRouter({
    routes,
    history:createWebHistory(import.meta.env.VITE_BASE_URL)
})

接口返回路由信息

[
    {
        path:'/atc',
        title:'文章管理',
        children:[
            {
                path:'/atc/atcList',
                title:'文章列表'
            },
            {
                path:'/atc/atcCategory',
                title:'文章分类',
            }
        ]
    }
]

根据返回信息通过path匹配对应路由与组件

// 对比动态路由
const recursionRouter = (dynamicsRouters=[],userRouter = [])=>{
    let realRouter = [];
    dynamicsRouters.forEach((v)=>{
        userRouter.forEach((item)=>{
            if(item.path==v.path){
                let routerItem = {
                    path:v.path,
                    name:v.name,
                    meta:{title:item.title}
                }
                let itemChildren = null
                if(item.children && item.children.length>0){
                    itemChildren = recursionRouter(v.children,item.children)
                }
                if(itemChildren){
                    routerItem.children = itemChildren
                }
                if(v.component){
                    routerItem.component = v.component
                }
                realRouter.push(routerItem)
            }
        })
    })
    return realRouter;
}

路由守卫重新设置路由信息

// 路由守卫
router.beforeEach(async(to, from, next)=>{
    if(to.path==='/login'){
        next()
    }else if(!getStorage('token')){
        next('/login')
    }else if(useCounterStore().asideList.length==0){
        try{
            const result = await getUserRouter()//接口返回用户路由权限信息
            if(result['ret']=='1'){
                const MainRouters = routes.filter(item=>item.name=='main')[0];
                const useRouters = recursionRouter(dynamicsRouters,result['data'])//匹配路由
                useRouters.unshift(redirectRouter)//添加重定向路由
                MainRouters.children = useRouters
                router.addRoute(MainRouters)

                next({...to})
            }else{
                next('/login')
            }
        }catch{
            next('/login')
        }
    }else{
        next()
    }
})