vue自动化路由

目的

解放双手，今后不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由仍是统一入口维护时，无需多虑，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越多越好

本文参考与相关内容地址

• 邮箱 ngaiwe@126.com
• github 进来单击star,做者给你么么哒！
• issue 百因必有果，你的报应就是我
• nuxt 源码参考