vue项目如何实现动态路由？

具体代码如下：

function BuildRoutes(routes) {
  let element = {
    name: routes.name,
    path: routes.path,
    component: () => import(`@/${routes.component}.vue`)
  };
 
  if (routes.component == "") {
    delete element.component;
  }
 
  if (!isNull(routes.children) || !isUndefined(routes.children)) {
    element.children = [];
    routes.children.forEach(item => {
      element.children.push(BuildRoutes(item));
    });
 
    return element;
  }
  return element;
}

// 递归组装路由信息
function dynamicBuild(source) {
  let element = {
    name: source.label,
    path: source.full_url,
    component: source.component
  };
 
  if (source.children != null) {
    element.children = [];
    source.children.forEach(item => {
      element.children.push(dynamicBuild(item));
    });
 
    return element;
  }
 
  return element;
 
}

// vuex mutations 函数
generateRoutes: (state, routes) => {
  state.addRouters = routes;
  let routers = BuildRoutes(routes);
  if (isObject(routers)) {
    routers = [routers];
  }
  router.addRoutes(routers);
}

// 动态路由请求数据获取
function dynamicRouter() {
  menuList().then(res => {
    let backendRouter;
    backendRouter = dynamicBuild(res.data.data[0]);
    storage.setItem({
      name: 'backend_router',
      value: backendRouter,
      expires: new Date().getTime() + 60 * 60 * 1000
    });
    store.dispatch('GenerateRoutes', backendRouter)
  });
}

以上是编程学习网小编为您介绍的“vue项目如何实现动态路由？”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。