跪求:关于Vue3动态注册路由?
题目描述
在使用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")
});
跪求大佬们帮忙看看怎么回事。
回答:
改成这样试下
const fn = (str) => { const com = _modules[str];
return com
};
component:fn("./About.vue")
以上是 跪求:关于Vue3动态注册路由? 的全部内容, 来源链接: utcz.com/p/933463.html