vue3动态路由

// 基础路由
export const routes = [
    {
        path: "/login",
        name: "login",
        component: ()=>import('@/views/login/index.vue'),
        meta:{
            title:'登录',
        }
    },
    {
        path: "/",
        name: "layout",
        component: ()=>import('@/views/layout/index.vue'),
        meta:{
            title:'layout',
        }
    },
]

// 动态理由方法
export const trendsRouter=(routerList:any)=>{
    routerList.forEach((i:any)=>{
        router.addRoute('layout',{
            path: i.path,
            name: i.name,
            component: ()=>import(`@/views/${i.component}/index.vue`),
            meta:{
                title:i.meta.title,
            }
        })
        if(i.children){
            trendsRouter(i.children)
        }
    })
    router.addRoute({path: '/:catchAll(.*)',name: '404',component: () => import('@/views/404.vue')})
}
// 调用方法
trendsRouter(addrouter)

// 导航守卫
let isRouter=false
router.beforeEach((to, from, next) => {
    let store=appStore()
    if(store.token!=''){
        if(isRouter){
            next()
        }else{
        	// 防止刷新空白页
            trendsRouter(store.showRoute)
            isRouter=true
            next({...to,replace:true});
        }
    }else{
        isRouter = false
        if(to.path==='/login'){
            next()
        }else{
            next('/login')
        }
    }
})