vite+vue3动态添加路由出错

import { createRouter, createWebHashHistory } from 'vue-router'
import { message } from 'ant-design-vue';
import Nprogress from 'nprogress';
import 'nprogress/nprogress.css';
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 = [];
  routers.map((item, index) => {
    list.push({
      component: modules['/src/views/layout/IndexView.vue'],
      children: [
        {
          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);
    }
  });
  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 {
      // 从后端获取路由信息 
      // const { data } = await menu({type:1, show: 1});
      // 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',
            meta: { title: '基本信息' },
          },
        ],
      });
      next({ ...to, replace: true });
    }
  } else {
    next({ name: 'login' });
    Nprogress.done();
  }
});

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

export default router

代码如上,在路由守卫中,动态添加路由信息的时候,总是报错,报错信息如下

动态路由无论是写死,还是从后端获取,都会报这个错误。求教解决办法

你可能感兴趣的:(vue.js,前端,javascript)