用addRoutes实现动态路由

有时候需要权限才能看到一些菜单，。这个时候路由就是动态的啦。我们改怎么处理呢？

一般的路由组件是这样写的。这样是写死的。所有的组件一旦登录进去大家都可以看到的。

想要实现动态就把这些组件登录以后从新获取到把他加进去。

首先在登录的时候把所有的路由组件通过接口获取过来。下面是接口的数据。可以看到他和写在router.js里面的组件的定义格式是一样的。具有name path component

login的登陆页面：

 import MenuUtils from '../common/js/MenuUtils';   //在这个组件里对路由进行了处理。

 // 获取权限

var pageRouters = [];        //存放路由的数组
                var powerParams = { userid: data.userid };
                getUserPowers(powerParams).then(retdata => {
                    this.logining = false;
                    let { msg, code, data } = retdata;
                    if (code !== 1) {
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        sessionStorage.setItem('menus', JSON.stringify(data.menus));
                        sessionStorage.setItem('actions', JSON.stringify(data.actions));

                        // 清空
                        this.$router.options.routes.splice(0,this.$router.options.routes.length);
                        pageRouters.splice(0,pageRouters.length);

                        MenuUtils(pageRouters,data.menus);//执行完这个pageRouters里面就接收了接口里传来的所有的页面了
                        pageRouters.push({ path: '*', redirect: '/404', hidden: true });
                        pageRouters.forEach((item)=>{
                            this.$router.options.routes.push(item);  //  // 将请求的路由先存放到options对象中
                        });
                        this.$router.addRoutes(pageRouters);

MenuUtils.js页面

import LazyLoading from './LazyLoading'    //使用lazyLoading实现懒加载
export default (routers,data) => {
    //这里之所以要重新遍历一下，是因为，通常我们动态路由的时候，是获取服务端数据，这个component属性是一个字符串，或者可能连字段名都是其他的key
    //所以这里要做一些转换
    generaMenu(routers,data);
}
function generaMenu(routers,data){  //这里的routers是login页面
    data.forEach((item)=>{
        let menu = Object.assign({},item);
        var vuename = '';
        if(menu.component == 'Home' || menu.component == 'Login' || menu.component == 'Main' || menu.component == '404'){
            vuename = menu.component;//这几个页面都是主页面。
        }else{
            var tmpArr = menu.component.split("_");
            vuename = tmpArr[0] + '/' + tmpArr[1];  
        }
        // console.log(vuename);
        menu.component = LazyLoading(vuename);
        if(menu.children && menu.children.length > 0){
            menu.children = [];
            generaMenu(menu.children,item.children);
        }
        routers.push(menu);  //把所有的内容都放在了routers。也就是login页面的那个pageRouters里面
    });
}