​​

一、动态路由

        最近接到一个需求，不需要在router配置文件里手动注册路由，点击菜单时，根据菜单上的地址，自动添加路由，跳转。(他们说我不管，反正菜单信息给你了，页面我写好了，但是我就不配路由，我懒得配，你自己想办法跳转.......................)

(我只是个小白啊喂！！)

看下官网怎么说(API 参考 | Vue Router (vuejs.org))；

 

 

二、创建

1 全局

        我做了两种方法，一种是登录之后我可以获取到全部的菜单的信息，将获取的菜单信息做个处理，处理成标准的路有对象，然后在app.vue的created生命周期中动态添加；

        个人觉得处理过程可能麻烦点，因为毕竟可能children里还有children，children里还有children...所以用到了递归，递归写不好的话，一不小心就会死循环...

        不展示了，中国人不骗中国人，我实现了，但是递归那代码写的不太好，脸就一张，我省着点丢，看下面那个实现方法吧，比这个要简单。

2 路由守卫

第二种是在路由守卫里做，如下：

//我觉得这么些方法放在路由对象里看着过于繁琐，且乱，
//所以将方法拿出来封装了一个RouterService类，下面的这些方法就是写在这个类里的
//然后在路由守卫里调用RouterService.routerGuard就可以了，我就不放全部的代码啦
//参数中的router就是项目中router对象  
routerGuard(router, to, from, next) {
        let comp_name = to.path.split("/dyn/");
        if(comp_name[1]&&comp_name[1]!="/"){
            let new_route = this.generateRoutesV2(to.path);
            //检查之前是不是已经添加过了
            //如果没有添加过就执行添加操作
            if(!this.hasRoute(new_route.name)){
                router.options.routes.push(new_route);
                router.addRoute("home",new_route);
                next(new_route.path)
            }
        }
        next();
    }
    //根据新路由的name判断routes中是否已经存在此路由
    hasRoute(name){
        let routes = vueRouter.options.routes;
        let flag = routes.some(item=>{
            return item.name==name
        })
        return flag
    }

    //加载组件
    loadView(view) {
        if (view) {
            return () => import('@/views/' + view)
        }
    }
    //根据path生成标准路由对象
    generateRoutesV2(path){
        //根据路径生成name，构建引入component的路径
        let name = path.split("/")[path.split('/').length-1];
        let comp_name = path.split("/dyn/")[1];
        let route_obj={
            path:path,
            name:name,
            component:this.loadView(comp_name)
        }
        return route_obj
    }

注意

使用addRoute时需要注意以下几点：(过程中我碰到的问题及总结)

1、路径须带上父路径，即路径写全；(这个我不确定是不是绝对正确)
2、使用addRoute动态添加后，不会在router.options.routes中显示，必须手动往router.options.routes中注册动态添加的路径才会显示
3、使用addRoute有两个参数，第一个是父路径的name，第二个是需要动态添加的路由项；
如果不写第一个参数，跳转路由时，页面并不会显示在父页面的router-view中，而是会重新打开一个新页面。

好，就酱，如有错误欢迎指出，词不达意还请见谅。(忽略我的代码质量，我还在学习进步中)

哦，我用的路由版本是3.2的版本，注意addRoutes在vue router 3中已经不支持了