vue动态路由

项目中打算是用后台控制路由的，简单实现了一下后台路由的实现方案。
使用的是 vue2中的 addRoutes 方法，实现的过程中遇到几个问题。
1.浏览器刷新之后，addRoutes添加的路由会丢失
2.组件懒加载的时候，无法识别传进来的字符串变量
这2个问题后面已经解决了，下面先上代码

//******************************************* 后台动态路由 和 调试 方法块 *****************************************************

router.beforeEach(function (to, from, next) {
    var dynamicRouterListStr = localStorage.getItem('router');
    if (dynamicRouterListStr != null) {
        if (store.state.router == null || store.state.router.length == 0) {
            var routerList = modalRouterList(JSON.parse(dynamicRouterListStr));
            if (! routerList instanceof Array) {
                routerList = [];
            }
            routerList.push(        {
            path : '*',
            redirect : '/error'
        }
        )
            store.commit('setRouter', routerList);
            router.addRoutes(routerList);
            next({ ...to, replace: true })
            
        }else{
            next();
        }
    }else{
    next();
}
});



function modalRouterList(list){
    console.log(list)
    var tempList = [];
    list.forEach(ele => {
        var obj = {};
        obj['path'] = ele['path'];
        obj['name'] = ele['name'];
        obj['component'] = (resolve) => require([`@/${ele['source']}.vue`], resolve);
        tempList.push(obj);
    })

    return tempList;
}

//******************************************* 后台动态路由 和 调试 方法块 *****************************************************

解决刷新路由丢失问题
1.从后台获取到路由信息后，把路由信息保存了 localStoreage中，路由每次加载的时候，判断localStoreage信息加载。
2.router.addRoutes是异步的，所以把全局的跳转 *也动态添加了，同时使用 next({ ...to, replace: true })重新载入。

解决组件懒加载字符串问题

image.png

把字符串变量分割开来，require中 用 @ + 变量 + .vue的方式加载即可。