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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
viewer.js实现图片预览功能
Jun 24 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
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
杏林同学录(六)
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
深入php处理整数函数的详解
2013/06/09 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python3的socket使用方法详解
2020/02/18 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python源文件的字符编码知识点详解
2021/03/04 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
成人继续教育实施方案
2014/03/01 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
职工年度考核评语
2014/12/31 职场文书
七年级地理教学计划
2015/01/22 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python