什么是路由自动注入
路由自动注入概念学习自nuxt,我们不需要在 router.js 中每次手动输入代码引入模块而是自动根据 文件目录格式 生成 router.js
我们把这个功能独立成一个 webpack 插件,并对相关功能进行了完善,而且实现了 vue-router 的所有核心功能
更详细使用指南和文档可以查看我们的 github仓库
举一个简单的列子,比如你的目录长这样
src ├── views │ ├── Login │ │ └── Index.vue │ └── User │ ├── Account │ │ └── Index.vue │ ├── Home │ │ └── Index.vue │ └── Index.vue
规则很简单,如果目录的一层是 Index.vue ,则目录名便是当前的路由名字,如果是子文件夹则是第二层路由,之后自动生成的 router.js 会长成这样
{ component: () => import('@/views/Login/Index.vue'), name: 'login', path: '/login' }, { component: () => import('@/views/User/Index.vue'), name: 'user', path: '/user' }, { component: () => import('@/views/User/Account/Index.vue'), name: 'user-account', path: '/user/account' }, { component: () => import('@/views/User/Home/Index.vue'), name: 'user-home', path: '/user/home' }
这里值得一提的是其实生成的 router.js 是没有必要加入到版本控制当中的,因为不论在开发( development )还是生产( production )第一次构建项目都会自动生成,比如你项目用到了 git 和 eslint ,那么应该把它放在 .gitignore 和 .eslintignore 中
为什么使用路由自动注入
方便
不用每次去引用模块,只用创建文件夹, router.js 会自动生成
统一路由命名
如果有完整的 code review 这个问题是不会存在的,但我们稍微做了一点简便,只要 code review 文件夹的命名就好了,最终生成的路由path会以驼峰命名,生成的name会以驼峰命名并且以连字符 - 连接不同层级的路由
统一路由层级
如图片中的列子,我们无法从文件的命名去判断路由到底在几级,而且经常写的时候,明明是2级或3级路由却和1级路由在一层路由下,这是很不规范而且与逻辑不符的
对比一下使用自动注入划分层级后的路由
src/views ├── Index.vue ├── NotFound.vue ├── Withdraw <!-- 第一级 --> │ ├── Index.vue │ └── Result │ ├── Description <!-- 第三级 --> │ │ └── Index.vue <!-- 第二级 --> │ └── Index.vue └── WithdrawHistory <!-- 第一级 --> └── Index.vue
可以从目录结构看出路由的层级
我们再来看看生成的路由,不同层级的路由名字通过连字符 - 连接,层级很清晰
{ component: () => import('@/views/Withdraw/Index.vue'), name: 'withdraw', path: '/withdraw' }, { component: () => import('@/views/Withdraw/Result/Index.vue'), name: 'withdraw-result', path: '/withdraw/result' }, { component: () => import('@/views/Withdraw/Result/Description/Index.vue'), name: 'withdraw-result-description', path: '/withdraw/result/description' }, { component: () => import('@/views/WithdrawHistory/Index.vue'), name: 'withdrawHistory', path: '/withdrawHistory' },
为什么选择 vue-router-invoke-webpack-plugin
完善的单元测试
types支持
vue-router-invoke-webpack-plugin 中独特的路由划分思维
当我们的页面过多的时候,比如项目有60多个甚至70多个单页面,文件不可能会放在一个目录下,一般这种时候,我们会按 功能 将相似功能的路由放在一个目录下,我们之前也是这么做的,其实这么做也是没啥问题的,但在路由自动注入下,我们提出了另外一种思路按路由 层级 划分
什么是层级划分呢,简单的一句话就是根据页面所在的相对url地址进行划分,举个列子,我们的首页如下
首页的路由为 / ,我们把首页当作根路由,那么可以进入的一级路由分别为 提现 提现记录 分成数据 等,点击提现后,我们进入了提现路由 /withdraw
进入提现页面后,会有两处可点击,这两处便是二级页面,放在一级页面的子文件夹中,按刚才的说法,路由目录(截取部分)便是这样