跪求：关于Vue3动态注册路由？

Question

题目描述

在使用Vue3的时候，需要使用addRoute动态注册几个路由进去，动态注册的路由他们都是用的是同一个组件，路由的router-view根据include对组件进行缓存。当对include进行操作的时候，不能影响其他路由的缓存，也就是说动态注册的路由的组件名称需要变化，以保证路由之间不受影响

题目来源及自己的思路

在开发环境自己实现了一下，但是打包之后render找不到了，导致页面没有办法正常渲染，demo代码如下。

相关代码

import { useRouter } from "vue-router";
const _modules = import.meta.glob('../views/**/*.vue');
const router = useRouter();
const fn = async (index) => {
  const maps = ["Aaron", "Angie"];
  const com = _modules["./About.vue"]();
  const c = await com;
  const def = c.default;
  console.log(def.render, def, com);
  return {
    ...def,
    name: maps[index],
    render: def.render,
    setup: def.setup
  };
};
router.addRoute("Home",{
  path: "about1",
  name: "About1",
  component: fn(0)
});
router.addRoute("Home", {
  path: "about2",
  name: "About2",
  component: fn(1)
});
router.addRoute("Home", {
  path: "about3",
  name: "About3",
  component: () => import("./About.vue")
});

跪求大佬们帮忙看看怎么回事。

Answer 1

改成这样试下

const fn = (str) => {
  const com = _modules[str];
  return com
};

component:fn("./About.vue")