vue自动化路由的实现代码

解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中去拦截他,总之比你想象的开发还要简单。

router-auto github地址有帮助的可以star一下

router-auto npm地址欢迎提issue实现效果

vue自动化路由的实现代码

简要用法

具体用法请实时查看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越多越好

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c5ccf0bd2cc0fe0fb5ad5119bc069c68.html