Vue3 + vite2.0 + addRoutes 动态路由
使用vite创建的vue3项目加载动态路由
·
业务需求:根据后台返回的路由表进行路由加载
代码:
比较不同的是vite的引用方式,再开发中使用 `import` 引用组件并不会报错,打包发布后会提示找不到文件,所有component组件引用部分代码调整如下:
vite中 import() 替换为 import.meta.glob('../views/*.vue') s根据自己项目的目录层级来写引用的文件夹;
const modules = import.meta.glob('../views/*.vue')
/**
* 动态添加路由
*/
// const addRoutes = (routes = []) => {
// routes.forEach((item) => {
// if (item.path) {
// const route = {
// path: item.path,
component: modules['../views' + item.path + '.vue'],
// }
// router.addRoute(route);
// }
// })
// };
import router from '@/router'
import store from "storejs";
/**
* 注册路由
*/
export const registerRoutes = () => {
return new Promise((resolve, reject) => {
const routerMap = store.get('router')
// 添加404页面
router.addRoute({
path: "/:catchAll(.*)",
redirect: "/404",
name: "NotFound",
})
if (routerMap.length) {
addRoutes(routerMap);
resolve(true);
}
})
}
const modules = import.meta.glob('../views/*.vue')
/**
* 动态添加路由
*/
const addRoutes = (routes = []) => {
routes.forEach((item) => {
debugger
if (item.path) {
const route = {
path: item.path,
component: modules['../views' + item.path + '.vue'],
}
router.addRoute(route);
}
})
};
更多推荐
已为社区贡献1条内容
所有评论(0)