vite-router-automation
v1.1.7
Published
提供了基于vite+vue3项目的路由自动化,匹配所有.vue文件,剔除APP.vue入口文件
Downloads
32
Maintainers
Readme
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();
})