跪求:关于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

回到顶部