1.1.7 • Published 7 months ago
import.meta.glob详解
| 序号 | 内容 |
|---|
| 1 | 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准 |
| 2 | 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径（请看 resolve.alias 选项)。 |
| 3 | Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。 |
| 4 | 你还需注意，所有 import.meta.glob 的参数都必须以字面量传入。你不可以在其中使用变量或表达式。 |
import.meta.glob总结
| 序号 | 内容 |
|---|
| 1 | 由于import.meta.glob方法不支持变量或表达式，所以目前本插件不能实现入口文件夹自定义，默认为/src文件夹。 |
| 2 | 为了方便使用者查看、修改源代码、提交PR，本插件直接导出包，未经vite构建，而源码中使用了ES6语法，所以你的项目需要支持ES6语法。 |
安装本项目
npm i vite-router-automation
使用本项目
// 将包导入router/index.js文件中
// 导入本项目
import auto_routes from 'vite-router-automation'
// 第一个参数是根路由指向文件，第二个参数是路由meta默认自定义信息，默认为{}
const route=auto_routes('/views/index',{});//举例
// 注意：当需要添加自定义meta信息时，第二个meta参数，必须填写默认信息，不能为{}。
const route=auto_routes('/views/index',{header:true,footer:true});//举例
// 导出生成的路由，将生成的路由添加到vue-router中
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: route
});
//路由自定义定制化的两种方法
//1、通过router.addRoute([路由配置对象])，如需添加多个路由，则进行循环遍历添加
const about = { //接口返回路由信息
path: '/about',
name: 'About',
meat:{
header:false,
footer:true
}
component: () => import('./views/About.vue')
};
router.addRoute(about); //添加到路由
//2、通过路由守卫进行路由定制化，自定义meta等信息
router.beforeEach((to,form,next)=>{
//当前路由
const Rpath=to.path;
//定制化路由集合
let Rarry=[
"/",
"/curriculum/view",
"/news/view"
];
//添加路由自定义信息
Rarry.forEach(item=>{
if (Rpath==item) {
to.meta.haeder=false;
to.meta.footer=true
}
})
console.log('打印守卫信息',to)
next();
})