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项目动态设置background背景色，解决颜色被替换问题

vue项目如何把es6语法转es5

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

标签： vue动态路由, vue教程

上面是“vue项目如何实现动态路由？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4375.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！