【vite 自动配置路由】
2023-06-13 09:17:39 时间
手动配置路由,是一个没有技术含量又浪费时间的工作。本文将介绍 vite 构建的 vue3 项目如何编写一个自动配置路由的脚本。
约定大于配置
要想使用脚本完成路由的自动配置,我们就需要遵循以下目录规则:
每一个页面对应一个包,当前包下的主页面命名为index.vue
;
每个包里必须配置一个page.js
;
在每一个page.js
里边配置,额外的路由信息,比如:
export default {
title: '商品',
menuOrder: 2
}
原理
因为vite使用的打包工具是rollup
,我们可以通过它提供的glob()
方法取得目录文件信息,通过一些匹配规则,在解析时自动生成路由。
但是,注意,扫描目录只能生成路由,没有额外的路由信息,如果需要配置额外的路由信息,我们需要配置一个新的page.js
文件来配置,并将其配置到脚本中。
代码
// 匹配views目录下的所有page.js,导入页面模块
const pageModules = import.meta.glob('../views/**/page.js',{
eager: true, // 忽略动态都如函数
import: 'default' // 提取default出来
})
// 导入组件模块
const comModules = import.meta.glob('../views/**/index.vue')
// 生成并导出路由
const routes = Object.entries(pageModules).map(([pagePath,config])=>{
// 不明白可以先搭建好目录,打印一下变量看一下
const path = pagePath.replace('../views','').replace('page.js','') || '/'
const name = path.split('/').filter(Boolean).join('-') || 'index'
const comPath = pagePath.replace('page.js', 'index.vue')
return {
path,
name,
component: comModules[comPath],
meta: config
}
})
// 创建路由器对象
const router = createRouter({
routes,
history:createWebHashHistory()
})
// 之后,你就可以做路由拦截配置了
// 路由前置守卫
router.beforeEach((to, from, next)=>{
// 开启进度条
NProgress.start()
next()
})
// 路由后置守卫
router.afterEach((to,from)=>{
// 关闭进度条
NProgress.done()
})
//导出路由器对象
export default router
相关文章
- pycharm虚拟环境下安装第三方库_pycharm需要配置环境变量吗
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
- 华三vlan配置_路由器配置vlan的步骤
- 盈高ASC策略路由更改为镜像准入技术配置教程
- SpringBoot消息源码解析:ActiveMQ自动配置
- HDLC与PPP协议原理与配置_路由交换基础内容
- 访问控制列表ACL配置规则_路由交换
- sublime 配置 插件 主题总结
- H3C路由交换 SNMT配置
- H3C路由交换 SSH配置
- 动态路由的原理与配置
- 使用Telegraf+Influxdb+Grafana配置VMware vSphere监控大屏
- 【Android Gradle 插件】AndroidSourceSets 配置 ② ( BaseExtension#sourceSets 配置 | AndroidSourceSets 配置简介 )
- mysql高并发配置详解数据库
- Spring Boot入门第三天:配置日志系统和Druid数据库连接池。详解编程语言
- Oracle 参数 RESUMABLE_TIMEOUT 官方解释,作用,如何配置最优化建议
- Linux下快速配置搭建路由解决方案(linux下配置路由)
- Linux服务器路由配置:轻松把握网络安全(linux服务器路由配置)
- Linux设置永久路由:不断改变的连接(linux配置永久路由)
- Linux网络路由配置指南(linux网卡路由)
- 轻松搞定Linux系统路由配置(linux配置路由)
- 探讨 Linux 路由技术:了解路由规则与配置方法(linux routes)
- 优雅实现AOP基于Redis配置(redis配置aop)
- Laravel框架路由配置总结、设置技巧大全
- Nginx反向代理websocket配置实例