chz-router_generate-cli 是一个 JS 编写的,根据你的 "config.json" 路由配置文件自动生成路由表的命令行工具。
读取你指定的 router-config.json 配置,从入口文件夹开始遍历所有 "config.json" 指向的文件,并根据 "config.json"中的身份生成不同的路由,并最终将路由表写入到你指定的输出文件中。
- $ npm install chz-router_generate-cli --dev 或使用淘宝镜像 $cnpm install chz-router_generate-cli --dev
- 在你执行 chz-router_generate 命令的目录下(一般是项目根目录)创建 router-config.json 文件,写入生成路由所需的配置。
- 编写"config.json"文件,指定需要读取目录,生成路由的文件夹路径。
- 执行 chz-router_generate 命令。
-
router-config.json
router-config.json 是你需要在执行 chz-router_generate 命令的目录下创建的一个整体的配置文件,包含以下内容:
// 这是一个 router-config.json 文件示例(以下内容都是必选) { "entry": "./src/views/", // 读取 config.json 文件 入口 "entry_alias": "@/views", // 入口路径的别名, 输出路由表时写component路径时使用 "project_alias": "@/", // 项目 src 路径的别名输出路由表时用于替换使用了项目根路径的路径 "output": "./src/router/router-list.js", // 输出路由配置文件路径 "identities": ["sys", "teacher", "student"] // 所有的身份,用于判断"config.json"文件中身份数组是否写错 }
-
config.json
每一个 "config.json" 文件描述的是该文件所在文件夹下所有需要生成路由的信息。
// 这是一个 config.json 文件示例 { "name": "home-component", // 该 "config.json" 文件的名称,用于 "component" 父路由命名 "component": "@/layout/basic-first-header.vue", // "list" 列表中所有路由的父路由组件,该vue文件中需要有 <router-view /> 标签,用于显示子路由 "exclude": ["mgr-organization-two", "user-student-one"], // 子路由文件夹名称 某种情况下可能希望 "list" 中的路由组件不使用 "component" 指定的父路由组件,而是使用上一层级的路由组件(也就是说提升子路由层级,与父路由平级) "list": [ { "name": "mgr-organization-one", // 子路由文件夹名称 告诉代码需要解析哪一个文件夹,该文件夹下需要有 index.vue 文件来填充 "component" 指定 vue 文件的 <router-view /> 标签 "meta": { // 记录到路由表中的路由信息 "icon": "iconfont xx-question", "title": "管理端组织机构一", "requireAuth": false }, "identities": ["sys"], // 确定哪些身份可以访问该文件夹下的路由 "platform": "classes" // 子路由属于哪一个平台 注意 只有解析入口的第一个 "config.json" 文件中有 "platform" 配置项生效,后续所有的子路由都会延续这个配置 不写为默认值 }, { "name": "mgr-organization-two", "meta": { "icon": "iconfont xx-question", "title": "管理端组织机构二", "requireAuth": true }, "identities": ["sys"], "platform": "organization" }, { "name": "mgr-organization-three", "meta": { "icon": "iconfont xx-question", "title": "管理端组织机构三", "requireAuth": true }, "identities": ["sys"] }, { "name": "user-teacher-one", "meta": { "icon": "iconfont xx-question", "title": "用户端教师一", "requireAuth": true }, "identities": ["teacher"], "platform": "teaching" }, { "name": "user-teacher-two", "meta": { "icon": "iconfont xx-question", "title": "用户端教师二", "requireAuth": true }, "identities": ["sys", "teacher"], "platform": "arrangement" }, { "name": "user-student-one", "meta": { "icon": "iconfont xx-question", "title": "用户端学生一", "requireAuth": true }, "identities": ["student"], "platform": "studying" }, { "name": "user-student-two", "meta": { "icon": "iconfont xx-question", "title": "用户端学生二", "requireAuth": true }, "identities": ["sys", "student"] } ] }
├─App.vue
├─main.ts
├─views
| ├─config.json # 指定/views目录下所有需要解析的目录
| ├─user-teacher-two
| | └index.vue
| ├─user-teacher-one
| | └index.vue
| ├─user-student-two
| | └index.vue
| ├─user-student-one
| | └index.vue
| ├─mgr-organization-two
| | ├─config.json # 指定/views/mgr-organization-two 目录下需要解析的目录
| | ├─index.vue
| | ├─mgr-two-children
| | | └index.vue
| ├─mgr-organization-three
| | └index.vue
| ├─mgr-organization-one
| | ├─config.json
| | ├─index.vue
| | ├─sub-aside-two
| | | └index.vue
| | ├─sub-aside-three
| | | └index.vue
| | ├─sub-aside-one
| | | └index.vue
| | ├─sub-aside-four
| | └index.vue
├─router
| ├─index.ts
| └router-list.js
├─layout
| ├─404.vue
| ├─basic-empty-route.vue
| ├─basic-first-header.vue
| └basic-sub-aside.vue
https://github.com/chuhezhe0807/chz-router_generate-cli-sample-project