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
 - · Nest.js 、 Next.js、 Nuxt.js的区别
 - · 小程序可以绑定其它小程序吗?
 - · 微信小程序防止事件穿透防止事件冒泡
 - · 普通链接二维码跳转小程序
 - · 解决flex-direction: column 之后元素宽度自动变为100%
 - · vue/react/node/vite/npm/yarn build自动更新版本号
 - · getVisitDistribution 访问来源定义(访问来源 key 对应关系)
 - · TinyMCE工具栏配置详解
 
