%20(2).svg)
项目简介
本项目借助 Router-Builder 插件，基于 Vue 框架实现自动路由生成。通过扫描约定好的文件目录，自动处理依赖导入关系，根据项目的文件目录结构生成 vue-router 配置对象，提升了路由配置的效率。
项目的主要特性和功能
- 自动根据文件目录结构生成
vue-router配置对象，无需手动编写大量路由代码。 - 支持文件夹的嵌套结构，可处理一级、二级及多级路由。
- 可通过
router.config.js文件进行自定义配置，如指定入口路径、输出路径、导入前缀等。 - 一个
.vue文件中可添加多个<router>标签，为同一页面生成多条路由路径。 <router>标签支持传入多种参数，如path、name、meta等，还能添加自定义参数。- 支持通过
import配置对象生成依赖导入语句。 - 可通过
module属性将路由模块进行抽离，便于管理。 - 支持定义路由的导航守卫，可直接在
<router>标签中写入函数内容。
安装使用步骤
安装插件
将插件作为开发依赖安装到项目中，使用以下命令之一：
bash
npm i router-builder -D
或
bash
npm install router-builder --save-dev
配置文件
在 src 同级目录下创建 router.config.js 配置文件，模板如下：
javascript
module.exports = {
entry: "/src/views", // 读取文件路径入口
output: "/src/router/router.js", // 路由文件输出路径
importPrefix: "@/views", // 组件导入前缀
ignoreFolder: ["components", /child\d/], // 忽略匹配的文件夹 可以是字符串和正则
fileName: "index", // 文件夹下的文件名称，通常是页面文件
};
生成路由文件
在终端中输入命令：
bash
npx router-builder
当终端输出 router file generation successful! 则表示成功生成路由文件。
使用路由文件
将生成的路由文件导入到对应的路由配置文件当中使用。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】