这个vue3动态路由访问不了?

我想写一个vue3动态路由的demo,写完之后,在浏览器上访问/home或者/system均是白屏,只有/login是可以正常访问的,这段代码到底是哪里出现了问题?

这是我的路由数据:

Mock.mock("/getMenus", "get", {

status: 200, //请求成功状态码

menus: [

{

path: "/",

name: "Main",

component: "MainView",

redirect: "home",

children: [

{

path: "home",

name: "home",

component: "HomeView",

meta: {

title: "首页",

icon: "HomeFilled",

},

},

],

},

{

path: "/system",

name: "system",

component: "SystemView",

meta: {

title: "首页",

icon: "HomeFilled",

},

}

],

});

这是我的代码:

import { createRouter, createWebHistory } from "vue-router";

import { getMenus } from "../api/getMenu.js";

const routes = [

{

path: "/login",

name: "login",

component: () => import('../views/LoginView.vue'),

},

];

const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),

routes,

});

function formatRoute(r) {

if (r.children && r.children.length > 0) {

let result = {

path: r.path,

name: r.name,

component: () => import(`../views/${r.component}.vue`),

children: []

}

r.children.forEach(item => {

let child = {

path: item.path,

name: item.name,

component: () => import(`../views/${item.component}.vue`),

meta: item.meta

}

result.children.push(child)

})

return result

} else {

return {

path: r.path,

name: r.name,

component: () => import(`../views/${r.component}.vue`),

}

}

}

function addRoute(data) {

data.forEach(item => {

let r = formatRoute(item)

router.addRoute(r)

})

}

router.beforeEach((to, from, next) => {

loadRoutes()

next()

});

function loadRoutes(){

getMenus().then(res => {

addRoute(res.data.menus)

console.log(router.getRoutes())

});

}

export default router;

控制台打印console.log(router.getRoutes())已经看到路由已经添加了进去,但是浏览器访问对应的路由显示空白,报错提示没有匹配的路由,这是哪个地方有问题?
这个vue3动态路由访问不了?


回答:

从你上面的代码来看,你在router.beforeEach钩子函数中调用了loadRoutes(),这样会在每次路由跳转之前去加载路由。但是,因为getMenus()是异步操作,loadRoutes()还没有完成添加路由的操作,就执行了next(),导致在路由跳转之前,新的路由还没有被添加到路由表里,所以会出现你说的空白页面的问题。

你可以在loadRoutes()函数中返回一个Promise,还有在router.beforeEach里等待loadRoutes()函数执行完毕后再调用next()。这些地方改一下:

// 修改 loadRoutes 

function loadRoutes() {

return new Promise((resolve) => {

getMenus().then((res) => {

addRoute(res.data.menus);

console.log(router.getRoutes());

resolve();

});

});

}

// 修改 router.beforeEach

router.beforeEach(async (to, from, next) => {

await loadRoutes();

next();

});

然后,为了不让每次路由跳转时都去请求路由数据,你可以在loadRoutes函数中判断是否已经加载过路由,如果已经加载过,就不再重新加载:

let isRoutesLoaded = false; // 添加一个标识,初始值为 false

// 修改 loadRoutes 函数

function loadRoutes() {

return new Promise((resolve) => {

if (isRoutesLoaded) {

resolve();

return;

}

getMenus().then((res) => {

addRoute(res.data.menus);

console.log(router.getRoutes());

isRoutesLoaded = true; // 路由加载完成后,将标识设为 true

resolve();

});

});

}

这样只有在第一次访问页面时才会去加载动态路由,之后的路由跳转不会再次加载。

以上是 这个vue3动态路由访问不了? 的全部内容, 来源链接: utcz.com/p/934157.html

回到顶部