vue3+vite3实现路由自动化

import {createRouter, createWebHashHistory} from 'vue-router'
const modules = import.meta.glob('/src/pages/**/index.js');
console.log(modules);
const routes = [];
let components = [];
Object.keys(modules).forEach(key => {
let component = modules[key];
components.push(component());
let name = key.split('pages/')[1].split('/')[0].toLowerCase();
let path = "/" + name;
if (name === 'index') {
path = "/";
}
let title = name;
routes.push({path, name, meta: {title: title}, component});
});
//get title from page
let res = await Promise.all(components);
res.forEach(page => {
for (const route of routes) {
if (route.name === page.default.name.toLowerCase() && page.default.title) {
route.meta.title = page.default.title;
break;
}
}
});
console.log(routes);
/**
* 定义返回模块
*/
const router = createRouter({
history: createWebHashHistory(), routes
})
export default router;
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
- · html5预览PDF(vue3)
- · vue3+vite+多环境发面到二级目录配置
- · vue3 html2canvas导出透明png图片
- · vue3无法使用vue-devtools
- · 微信小程序开发中,通过API生成的体验版短链接,打开跳转到的是生产版
- · Nest.js 、 Next.js、 Nuxt.js的区别
- · 小程序可以绑定其它小程序吗?
- · 微信小程序防止事件穿透防止事件冒泡
- · 普通链接二维码跳转小程序
- · 解决flex-direction: column 之后元素宽度自动变为100%
- · vue/react/node/vite/npm/yarn build自动更新版本号
- · getVisitDistribution 访问来源定义(访问来源 key 对应关系)
