vue3，vuerouter4，登录时一次动态路由，打不开页面？

Question

const modules = import.meta.glob('@/views/**/*.vue');
// 生成路由
GenerateRoutes({ commit }) {
  const serviceCode = session.getSS('serviceCode');
  return new Promise(resolve => {
    // 向后端请求菜单数据
    menuAPI.getMenu(serviceCode).then(res => {
      // 处理路由
      const routerData = routerDataChange(modules, res, []);
      const historyRouters = router.getRoutes();
      historyRouters[0].children = routerData;
      router.addRoute(historyRouters);
      resolve(router.getRoutes());
    })
  })
}

// 处理路由数据
export function routerDataChange(modules, router, menu, routerPath = '') {
  router.forEach((r) => {
    if (r.children && r.children.length > 0) {
      routerPath += r.path;
      menu = routerDataChange(modules, r.children, menu, routerPath);
    } else {
      console.log(modules);
      console.log(`/src/views${r.component}`);
      console.log(modules[`/src/views${r.component}`]);
      menu.push({
        path: routerPath + r.path,
        name: r.code,
        meta: {
          title: r.name,
          icon: r.icon
        },
        component: modules[`/src/views${r.component}`]
      });
    }
  });
  return menu;
}

我怎么修改router/index.js的路由数组？

Answer 1

你可以参考一下下面的实现：

// 生成路由
GenerateRoutes({ commit }) {
  const serviceCode = session.getSS('serviceCode');
  return new Promise(resolve => {
    // 向后端请求菜单数据
    menuAPI.getMenu(serviceCode).then(res => {
      // 处理路由
      const routerData = routerDataChange(modules, res, []);
      router.addRoute({ path: '/', children: routerData });
      resolve(router.getRoutes());
    })
  })
}

// 处理路由数据
export function routerDataChange(modules, router, routerPath = '') {
  const menu = [];
  router.forEach((r) => {
    if (r.children && r.children.length > 0) {
      routerPath += r.path;
      const childRoutes = routerDataChange(modules, r.children, routerPath);
      menu.push(...childRoutes);
    } else {
      menu.push({
        path: routerPath + r.path,
        name: r.code,
        meta: {
          title: r.name,
          icon: r.icon
        },
        component: modules[`/src/views${r.component}`]
      });
    }
  });
  return menu;
}