# vue-router-automation

**Repository Path**: web_io/node-packages

## Basic Information

- **Project Name**: vue-router-automation
- **Description**: 关于vue路由自动化的npm包
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/vue-router-automation
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-10-24
- **Last Updated**: 2024-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 安装本项目
```
npm i vue-router-automation
```
## 项目说明
本项目基于webpack提供了一个context方法来获取到目录下的所有文件，我们可以通过require.context方法拿到我们想要的指定文件夹下所有的vue文件。
基于webpack的vue2/vue3项目都可以使用本项目，只需要在router/index.js文件中导入vue-router-automation，然后调用Sroutes方法即可。
## 参数说明
| 序号 | 内容 |
|--|--|
| 参数1 | 第一个参数是根路由指向文件 |
| 参数2 | 第二个参数是路由meta默认自定义信息，默认为{} |
## 使用说明
### 1、基础使用
```js
// 在router/index.js文件使用，将包导入router/index.js文件中
// 导入
const R=require('vue-router-automation');
// 路由生成
const routers=R.Sroutes('views/index',{});

// 导出生成的路由，将生成的路由添加到vue-router中
const routes = R.routes;
const router = new VueRouter({
  routes
})
```
### 2.进阶使用（路由信息自定义）
```js
// 在router/index.js文件使用，将包导入router/index.js文件中
// 导入
const R=require('vue-router-automation');
// 注意：当需要添加自定义meta信息时，第二个meta参数，必须填写默认信息，不能为{}。
// 路由生成
const routers=R.Sroutes('views/index',{header:true,footer:true});

// 导出生成的路由，将生成的路由添加到vue-router中
const routes = R.routes;
const router = new VueRouter({
  routes
})

// 通过路由守卫进行路由定制化，自定义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();
})
```