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;
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
- · vue3+vite+多环境发面到二级目录配置
- · vue3 html2canvas导出透明png图片
- · vue3无法使用vue-devtools
- · 小程序可以绑定其它小程序吗?
- · 微信小程序防止事件穿透防止事件冒泡
- · 普通链接二维码跳转小程序
- · 解决flex-direction: column 之后元素宽度自动变为100%
- · vue/react/node/vite/npm/yarn build自动更新版本号
- · getVisitDistribution 访问来源定义(访问来源 key 对应关系)
- · TinyMCE工具栏配置详解
- · Ant Design Vue 1.7.8 (vu2)自定义路由菜单图标
- · vue获取节点的父节点、兄弟节点、子节点