dynamic routing
Recently, I have been relatively free. I studied the development of projects with vite, and then thought of using dynamic routing. Everything went smoothly. As a result, there was a problem with importing files when generating routes. It was outrageous. I asked Du Niang to find out what the problem was. Look at the code that has been written
代码。
import {
createRouter, createWebHashHistory } from "vue-router";
import {
routerData } from "@/mock/routerData";//导入的mock文件,里面是配置路由的
let modules = import.meta.glob("../views/**/*.vue");
console.log(modules);
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/",
redirect: {
path: "/home" },
},
{
path: "/home",
name: "门户主页",
component: () => import(`@/views/home.vue`),
},
],
});
createRouterList(routerData);//添加路由的回调
localStorage.setItem("routerData", JSON.stringify(routerData));
router.beforeEach(async (to, from, next) => {
next();
});
function createRouterList(arr: any): void {
arr.forEach((item: any) => {
if (item.component != "Layout") {
//router4.x后需要用addRoute添加路由
router.addRoute({
path: item.path,
name: item.name,
component: modules[`../views/${
item.component}.vue`],
});
}
if (item.children && item.children.length) {
createRouterList(item.children);
}
});
}
export default router;
If you use the previous method to write, there will be a problem that this file cannot be found
function createRouterList(arr: any): void {
arr.forEach((item: any) => {
if (item.component != "Layout") {
router.addRoute({
path: item.path,
name: item.name,
component: import(`../views/${
item.component}.vue`),//这个地方换成以前的写法就会出现问题
});
}
if (item.children && item.children.length) {
createRouterList(item.children);
}
});
}
In addition, you may not report an error in this step, but after packaging and publishing, there will be an error that the module cannot be found
Files can now be imported in batches using import.meta.glob()
let modules = import.meta.glob("../views/**/*.vue");
//获取到的数据是这样的
//{
// ../views/hellworld/index.vue: () => import('/src/views/hellworld/index.vue')
// ../views/hellworld/shopping.vue: () => import('/src/views/hellworld/shopping.vue')
// ../views/home.vue: () => import('/src/views/home.vue')
// ../views/index.vue: () => import('/src/views/index.vue')
//}
end
There is still a long way to go for the little rookie in the pit. Yesterday, I encountered the problem of installing the jsx plug-in and reporting an error. First, I upgraded vite to 3.0, but it still didn’t work. Then I tried to change the version of node, and replaced it with 16.14.1. After the version, it was inexplicably fine, it was really painful.