网站建设推广语,删除的网站做404,wordpress图片变形,保定关键词优化软件参考文档 vite的glob-import
vue路由配置基本都是重复的代码#xff0c;每次都写一遍挺难受#xff0c;加个页面就带配置下路由 那就利用 vite 的 文件系统处理啊
先看实现效果 1. 考虑怎么约定路由#xff0c;即一个文件夹下#xff0c;又有组件#xff0c;又有页面每次都写一遍挺难受加个页面就带配置下路由 那就利用 vite 的 文件系统处理啊
先看实现效果 1. 考虑怎么约定路由即一个文件夹下又有组件又有页面怎么区分它们这就需要提前约定好
如下约定 以 index.vue 结尾的就是路由其它都认为是组件 目录结构如下, 这里我放入 views目录下
├─src├─views ├─about├─index.vue # 认为是页面├─page.ts # 对这个页面的配置例如meta中的信息 ├─home├─index.vue├─page.ts├─mine├─index.vue├─page.ts└─other├─info├─index.vue├─page.ts└─pick├─index.vue├─page.ts├─index.vue├─page.tspage.ts [ 约定为 配置文件主要赋值给 meta 属性它默认导出一个对象]
export default {title: 关于,name: xxx,auth: true
}2 找到views 目录下带 page.ts 的文件它就是你要的页面
// 获取每个页面的配置参数 [后边传参啥意思顶部点击glob的文档]
const configPage import.meta.glob(../views/**/page.ts, {import: default,eager: true,
})3 再找到以index.vue 结尾的文件这是路由要渲染的组件
// 获取views文件夹下所有.vue文件最终组成想要的路由
const vuePage import.meta.glob(../views/**/index.vue)
// 这个打印出来是个这种格式
// {
// ../views/home/index.vue : () import(/src/views/home/index.vue)
// }注 ** 的意思是为了获取所有文件顶部点文档查看
4 接着就是组装每个路由了
export const routes Object.entries(configPage).map(([tsPath, config]: any) {let path tsPath.replace(../views, ).replace(/page.ts, ) || /let name path.split(/).filter(Boolean).join()// 通过这个key 再 vuePage 变量中获取对应的路径let pageKey tsPath.replace(page.ts, index.vue)// 返回单个路由文件配置return {path,name,meta: config,component: vuePage[pageKey],}}
)最后导出路由 这里放了layout
const router createRouter({history: createWebHistory(),routes: [{path: /,component: () import(./../layout/index.vue),children: [...routes],},],
})
export default router
