vue.js - vue3，vuerouter4，动态路由component怎么写？

Question

GenerateRoutes({ commit }) {
  return new Promise(resolve => {
    // 向后端请求路由数据
    menuAPI.getMenu().then(res => {
      // 处理路由
      const routerData = routerDataChange(res, []);
      const historyRouters = router.getRoutes();
      historyRouters[0].children = routerData;
      router.addRoute(historyRouters);
      
      resolve(router.getRoutes());
    })
  })
}
// 处理路由数据
export function routerDataChange(router, menu, routerPath = '') {
  router.forEach((r) => {
    if (r.children && r.children.length > 0) {
      routerPath += r.path;
      menu = routerDataChange(r.children, menu, routerPath);
    } else {
      menu.push({
        path: routerPath + r.path,
        name: r.code,
        meta: {
          title: r.name,
          icon: r.icon
        },
        component: loadView(r.component)
      });
    }
  });
  return menu;
}


export function loadView(view) {
  // return import(`@/views/factoryManage/hazardZoning/classification/index.vue`);
  // return () => import(`@/views/factoryManage/hazardZoning/fourColor/index.vue`)
  // return defineAsyncComponent(() =>
  //   import('@/views/factoryManage/hazardZoning/fourColor/index.vue')
  // )
  return defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      resolve('@/views/factoryManage/hazardZoning/fourColor/index.vue')
    })
  })
  // return require(`@/views${view}`)
  // return (resolve) => require([`@/views${view}`], resolve)
  // return () => import('@/views/factoryManage/hazardZoning/fourColor/index.vue')
}

router.getRoutes()数据如下。

页面报错No match found for location with path "/a"
路由跳转：空白页面。

Answer 1

path: “/a”,试试？

Answer 2

{
    component: () => import('../views/404')
}