# vite-router-automation

**Repository Path**: web_io/vite-router-automation

## Basic Information

- **Project Name**: vite-router-automation
- **Description**: vite-router-automation，基于vite开发的vue路由自动化包
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-28
- **Last Updated**: 2024-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目说明
vite-router-automation是基于vite实现的路由自动化npm包，适用于vite+vue3项目当中，匹配所有.vue文件，剔除APP.vue入口文件。
## 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
```

## 使用本项目
```js
// 将包导入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();
})
```