vue 动态添加路由

处理json生成vue需要的格式

/**
 * 动态添加路由
 */
function setRouter(data) {
  let ro = [];
  let obj = {
    path: "/Home",
    name: "首页",
    component: resolve => require(["@/views/Home.vue"], resolve),
    children: []
  };
  data.forEach(function(value) {
    let view = value.component;
    let path = value.path;
    value.path = "/" + path;
    value.component = resolve => require([`@/views${view}`], resolve);
    obj.children.push(value);
  });
  ro.push(obj);
  return ro;
}

这里注意一下  require 目前不支持完全动态传参 

require([`@${路径}`]) 或者 require([`${路径}`]) 都是无法找到路由

json数据如下：

在vuex里声明一个状态 routerStatus 保存是添加路由还是跳转页面然后在路由守卫里如下

/**
 * @param {Object} to 即将要进入的目标 路由对象
 * @param {Object} from 当前导航正要离开的路由
 * @param {Function} next 一定要调用该方法来 resolve 这个钩子。
 */
router.beforeEach((to, from, next) => {
  const vm = store;
  if (to.path != "/") {
  //判断登录信息是否为空
    if (Object.keys(vm.getters.getLoginInfo).length != 0) {
      //判断是刷新页面且添加路由还是跳页面
      if (vm.state.routerStatus) {
        next();
      } else {
        //判断取到的路由数据不能为空
        let data = storage.ss.get("login");
        if (data != null) {
          vm.state.routerStatus = true;
          let ro = setRouter(data.routerMenu);
          router.addRoutes(ro);
          next({ ...to, replace: true });
        }
      }
    } else {
      next("/");//跳转登录
    }
  }
  next();
});