解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中去拦截他,总之比你想象的开发还要简单。
router-auto github地址有帮助的可以star一下
router-auto npm地址欢迎提issue实现效果
简要用法
具体用法请实时查看github或者npm,下面做一些简要用法介绍
引用
const RouterAuto = require('router-auto') module.exports = { entry: '...', output: {}, module: {}, plugin:[ new RouterAuto() ] }
项目结构
package.json 等等文件与目录
src 项目目录
page 页面目录
helloworld
Index.vue 页面入口
hello.vue 业务组件
router.js 额外配置
demo
test
Index.vue 页面入口
test.vue 业务组件
Index.vue 页面入口
home
Index.vue 页面入口
上面的目录结构生成的路由结构为
import Vue from 'vue' import Router from 'vue-router' import helloworld from '@/page/helloworld/Index.vue' import demo from '@/page/demo/Index.vue' import demo_test from '@/page/demo/test/Index.vue' import home from '@/page/home/Index.vue' Vue.use(Router) export default new Router({ mode:'history', base:'/auto/', routes:[{ path: '/helloworld/index', name: 'helloworld', component: helloworld },{ path: '/demo/index', name: 'demo', component: demo },{ path: '/demo/test/index', name: 'demo_test', component: demo_test },{ path: '/home/index', name: 'home', component: home }] })
初始化参数配置new RouterAuto(options = {})
参数
说明
类型
默认值
必填项
contentBase
根目录即src平级目录
String
当前根目录process.cwd()
否
mode
router中mode
String
history
否
base
router中base
String
/auto/
否
watcher
是否启用热更新(请在dev环境启用)
Boolean
false
否
小缺陷
首先我们的项目不需要子路由,所以都是平铺路由,但是你可以文件夹中创建文件夹在用文件夹规划子路由,后续会升级几个版本加入进去,当然看看使用了和需求,伪需求都砍掉
现在生成的.router.js文件在磁盘中,作者以后进一步优化放到内存中,一步一个脚印,共创大好河山
然后就没缺陷了.... 希望提issue越多越好