vue自动化路由的实现代码


Posted in Javascript onSeptember 30, 2019

目的

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

本文参考与相关内容地址

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
js onclick事件传参讲解
Nov 06 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
Angular2库初探
Mar 01 Javascript
js中null与空字符串""的区别讲解
Jan 17 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
js实现图片上传即时显示效果
Sep 30 #Javascript
vue实现select下拉显示隐藏功能
Sep 30 #Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
You might like
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
js制作提示框插件
2020/12/24 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python模拟登陆实现代码
2017/06/14 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
小学教师寄语大全
2014/04/03 职场文书
大学生就业策划书范文
2014/04/04 职场文书
2014年教务工作总结
2014/12/03 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
《观潮》教学反思
2016/02/17 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Nginx 常用配置
2022/05/15 Servers