vite+vue3 怎么实现动态路由

vite+vue3 怎么实现动态路由

import { createRouter, createWebHashHistory } from 'vue-router'
import { message } from 'ant-design-vue';
import Nprogress from 'nprogress';
import 'nprogress/nprogress.css';
// import menuStore  from '@/stores/menu'
import { menu } from '@/api/auth';

const modules = import.meta.glob('/src/views/*/*.vue'); // Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: modules['/src/views/login/IndexView.vue'],
      meta: { login: true }
    },
    // {
    //   component: modules['/src/views/layout/IndexView.vue'],
    //   children: [
    //     {
    //       path: '/',
    //       component: modules['/src/views/home/IndexView.vue'],
    //       name: 'home-list',
    //       meta: { title: '基本信息' },
    //     },
    //   ],
    // },
  ]
});

// 递归引入路由
const dynamicRouter = routers => {
  const list = [
    {
      component: modules['/src/views/layout/IndexView.vue'],
      children: []
    }
  ];
  routers.map((item, index) => {
    list[0].children.push({
      path: item.path,
      name: item.unique_auth,
      // component: () => import(`@/views/${item.component}.vue`),
      component: modules[`/src/views/${item.component}.vue`],
      meta: { title: item.name }
    });
    if (item.children && item.children.length) {
      list[index].children.children = dynamicRouter(item.children);
      list[0][index].children.children = dynamicRouter(item.children);
    }
  });
  return list;
};

// 挂载全局前置路由守卫
router.beforeEach(async (to, from, next) => {
  Nprogress.start();
  document.title = to.meta.title === undefined ? '后台管理系统' : to.meta.title;
  if (to.name == 'login') {
    next();
    return;
  }
  if (localStorage.getItem('Authori-zation')) {
    if (to.name == 'login') {
      next('/');
      Nprogress.done();
    } else {
       // 用pina也不行
      // const store = menuStore();
      // if (store.menu.length) {
      //   next();
      // } else {
      //   store.getMenu({type:1, show: 1});
      //   console.log(store.menu);
      //   dynamicRouter(store.menu).map(item => {
      //     router.addRoute(item);
      //   });
      //   next({ ...to, replace: true });
      // }

      // 请求接口
      const { data } = await menu({type:1, show: 1});
      console.log(data);
      dynamicRouter(data.menu).map(item => {
        router.addRoute(item);
      });

      // 写死也没用
      // router.addRoute({
      //   component: modules['/src/views/layout/IndexView.vue'],
      //   children: [
      //     {
      //       path: '/',
      //       component: modules['/src/views/home/IndexView.vue'],
      //       name: 'home-list',
      //       meta: { title: '基本信息' },
      //     },
      //   ],
      // });
      next({ ...to, replace: true });
    }
  } else {
    message.error('身份过期，请重新登录');
    next({ name: 'login' });
    Nprogress.done();
  }
});

// 挂在全局后置路由
router.afterEach(() => {
  Nprogress.done();
});

export default router

报错找不到路径
请教解决办法

前端一个全量的路由表，后端返回相应的路由，然后对比合并