vue3,vuerouter4,动态路由component怎么写?

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()数据如下。
image.png
页面报错No match found for location with path "/a"
路由跳转:空白页面。

阅读 3k
2 个回答
{
    component: () => import('../views/404')
}

path: “/a”,试试?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题