vue 动态路由扩展应用 和 路由源码解读

// 监听route的问题
watch: {
    $route: {
        handler(route) {
            console.log(this.$route.matched);
            this.crumbData = this.$route.matched.map(m => m.name || m.redirect)
        },
        immediate: true // 这⼀一⾏行行要加上，让它⼀一开始执⾏行行⼀一次
    }
}

动态路由

利⽤用$router.addRoutes()可以实现动态路路由添加，常⽤用于⽤用户权限控制。

// router.js
// 返回数据可能是这样的
//[{
    //  path: "/",
    //name: "home",
    //  component: "Home", 
    //Home
//}]

// 异步获取路路由
api.getRoutes().then(routes => {
    const routeConfig = routes.map(route => mapComponent(route));
    router.addRoutes(routeConfig);
})
// 映射关系
const compMap = {
    'Home': () => import("./view/Home.vue")
}
// 递归替换
function mapComponent(route) {
    route.component = compMap[route.component];
    if(route.children) {
        route.child