什么是自动途径注射

自动路线注入的概念是从nuxt学来的。我们不需要每次都在router.js中手动输入代码介绍模块，而是根据文件目录格式自动生成router.js

我们将这个功能分离成一个webpack插件，完善相关功能，实现vue-router的所有核心功能

在我们的github仓库中可以找到更详细的用户指南和文档

给出一个简单的列表，比如你的目录的长度

Src 视图 登录 Index.vue 用户 账号 index.vue 主页

{ component :()=import(' @/view/log in/index . vue ')，name: 'login '，path: '/' log in ' }，{ component :()=import(' @/view/User/index . vue ')，name: 'user '，path : '/' User ' }，{ component 3:()=import(' @/view/User/Account/index . vue ')，name 3: ' User-Account '，path :因为第一个构建项目无论是开发还是生产都会自动生成，比如你的项目使用git和eslint，所以你应该放进去。gitignore和。eslintignore。

为什么使用路线自动注射

方便的

不要每次都引用模块，只需要创建一个文件夹，router.js就会自动生成

统一路由命名

如果有完整的代码评审，这个问题就不存在了，但是我们把它做得简单了一点，只要给代码评审文件夹命名，最终生成的路线路径就以驼峰命名，生成的名称以驼峰命名，用连字符连接不同级别的路线。

统一路由层次结构

如图中的列所示，我们不能从文件的命名来判断路由的级别，在我们经常写的时候，明明是2级或者3级路由，却在1级路由下，非常不规则，不符合逻辑。

自动注射分级使用后比较路线

src/viewsindex.vuenotfound.vue撤退！-第一关- index.vue 结果 描述！-第三层次-指数. vue！——第二个层次——撤回历史！-第一层- 索引. vue可以从目录结构中看到路由层

让我们看看生成的路线。不同级别的路由名称由连字符连接，层次结构非常清晰

{ component :()=import(' @/view/retract/index . vue ')，名称： ' retract '，路径： '/' retract ' }，{ component :()=import(' @/view/retract/Result/index . vue ')，名称： ' retract-Result '，路径： '/' retract/Result ' }，{ component 3:()=import(' @/view/retract/Result/Description/index . vue ')，名称333366

完美单元测试

类型支持

vue-router-invoke-web pack-plugin中独特的路由思想

当我们页面太多的时候，比如项目单个页面有60多个甚至70多个，文件不能放在一个目录下。一般这时候我们会把功能相近的路由按照功能放在一个目录下。我们以前也这样做过。事实上，这样做没有问题。然而，在自动路由注入下，我们提出了另一种思路，根据路由层次划分路由

什么是等级划分？简单来说，就是根据页面所在的相对网址来划分。例如，我们的主页如下

首页的路线是/，我们把首页作为根路线，所以可以输入的一级路线是分数据的提现记录等。点击提现后，我们进入提现路线/提现

进入提现页面后，会有两个地方可以点击。这两个地方是辅助页面，它们位于主页面的子文件夹中。根据刚才的说法，路由目录(截取部分)是这样的

src/views银行！-银行卡管理- index.vue divideddata！-分为数据- 指数. vue！page-之家！-404 routing- 找不到 取款 银行详情！-在提现时查看银行卡信息-index . vue描述！-提现说明-指数. vue！-撤军页面-撤军历史！-records-提现 指数。vue一般是这样划分的。类似的功能会在一个文件夹下，也实现了按功能路由的思想。而且这种层级划分一目了然，很容易看出路由的从属关系。

但是，有时候会有一个麻烦，就是有些页面可能会出现在当前级别以下或者另一个级别以下。按功能划分也是这种情况，即功能可能存在于两个功能点之间。其实可以考虑哪个级别更有分量或者从用户的点击习惯来看，哪个位置会放在哪个级别之下。

vue-路由器-调用-网络包-插件中唯一的文件结构

可能大家都会有疑问，为什么非要写Index.vue加一层文件夹打包，直接命名vue文件不好？用过nuxt的同学可能也感受到了这种不同，这也是我们在nuxt的基础上增加的一个功能，为了封装单个页面更加友好。

例如，如果您的项目没有引用ui库，许多业务组件需要自己编写。除了常用的组件会放在目录最外层的组件文件中，对应单个页面的其他业务组件会放在哪里？这是我们预订的位置。例如，目录结构如下

src/view审核 index.vue 组件 audititem.vue 图片auditintro.png审核是我们的审批页面。它使用仅由当前页面使用的AuditItem.vue组件，并且还引用仅由当前页面使用的图片AuditItem.vue。独特的文件结构是为满足这一要求而诞生的。当前页面的组件图片在一个文件夹中会更清晰，但值得一提的是，还需要在插件中设置ignore来忽略我们没有解析的目录，比如这个。

plugins :[new vuerouteninvokebackplugin({ dir : ' src/view '，alias : ' @/view '，language: 'javascript '，ignore: ['images '，' components '，' template . vue ']})]；那么images组件template.vue将被忽略并且不会被解析

谈论路由权限控制

至于前端控制路由权限，前段时间看了一篇文章。感觉实现思路有点复杂。其实有一个比较简单的想法，就是后端给出一个当前用户没有权限的路由，然后前端在beforeEach钩子中匹配。如果匹配，它将直接跳转到404或未经允许的页面。如果是用Vue-router-invoke-web pack-plugin写的，会这样写。

apis.getForbiddenRoute

导出默认的{//requests async getforbiddenroute(){ return['/single/user ']，一个目前没有权限的路由列表；}};plugins :[new VueRouterinvokeLugin({//观察目录dir: 'demos/src '，//观察目录别名alias: '@/src '，//当前语言language: 'javascript '，//生成router.js routerdir:' demos '的位置。//忽略文件夹ignore: ['images '，' template.vue '，' components '，' not found.vue']。//404路由地址not found : ' @/src/not found . vue '，//引用的模块module: [{name3360' APIs '，package:' @/APIs'}]，//与scroll behavior scroll behavior :相同(to，from，saved position)={ if(saved position){ return saved position；} else { return { x: 0，y : 0 }；} },-主要是这段代码-/* eslint-disable */beforeach : async(to，from，next)={//判断接口是否if(！Vue。_ cachedforydenroute){ Vue。_ cachedforydenroute=[]；await apis.getForbiddenRoute()。然后(res={ Vue。_ cachedForbiddenRoute=res});}//当当前页面的地址存在于禁止访问列表中时，直接跳转到404页面if (vue。_ cached山梨醇路线。包括(到。path)) {next ({name: '未找到' })；} else { next()；}}})，]不过话说回来，任何实现思路，前端获取的接口数据还是可以被篡改的，所以还是需要后端保护

项目实现思路

这个项目的实现并不太复杂，但是需要照顾的地方很多

基本路由动态路由多层嵌套路由多层嵌套动态路由元替代文件友好处理不符合规则的命名转换统一节点中的原生fs模块非常不友好，有很多小细节需要考虑，尤其是当路由过于复杂时

但是我没有想到节点fs的坑，特别是跨平台的，所以我们放弃了使用原生fs模块，用chokidar和fs-extra代替了fs的一些功能

前段时间我也学习了vue的ast语法树，所以我学习了下面的思路来尝试构建一个ast，但是方法还是不一样。vue通过定期拆分元素、开始标签、属性元素、字符元素、结束标签等来构建语法树。然后是拼接，拼接过程特别复杂，这个项目会简单很多，通过文件读取递归遍历目录就可以直接生成一个ast。

然后通过语法树构建string router.js，构建过程还是比较麻烦的。最后，将构造好的字符串写入文件，就完成了

这个项目还需要改进

单元测试

现在单元测试覆盖率是100%，但是我觉得还有很多稍微复杂的情况没有写出来。之后，我们不仅会看单元测试的覆盖率，还会根据需要测试的功能点补充完整性。

测试环境

该项目连接到circleci，它不能在windows下测试。常用的开发环境也是mac。因此，在测试环境之后，我们应该研究其他能够支持windows的ci工具，并测试不同的节点版本

其实现在windows有一个bug，但是我发现nuxt也有这个bug，所以觉得可能不是bug，也不是功能，然后会问问题征求意见，不知道是不是我电脑的问题。简单来说，就是fs.watch监听文件目录的时候(但是这里我们实际上使用的是chokidar。但都一样。)当您更改现有文件目录的名称时，您不能更改它。在windows下，系统会提示您当前引用了什么文件，您需要在修改文件名之前结束该过程

更友好的支持

目前项目支持节点版本8.15.1，只有webpack4，然后是webpack3和即将推出的webpack5。

更多功能

除了简单路由一栏和设置刚才提到的省略项，我们还支持vue-router的其他核心功能，包括动态路由、嵌套路由、全局路由、守护元替代等功能。相关功能点写在我们开源仓库的文档里。有关详细的用法和注意事项，您可以访问我们的github仓库。如果你觉得项目好，可以给我们一个小星星。当然，如果您在使用中发现与预期不完全相同的情况或错误，

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。