浅入深出Vue之自动化路由


Posted in Javascript onAugust 06, 2019

在软件开发的过程中,"自动化"这个词出现的频率是比较高的。 自动化测试自动化数据映射 以及各式的代码生成器。这些词语的背后,也说明了在软件开发的过程中,对于那些 重复千篇一律 的事情。人们总是想让它自己完成,来解放我们的双手。

“懒惰”是进步的动力

为什么要自动化路由

路由自动化在于解决以下的问题:

  • 每次新建页面时的重复操作:在路由文件中添加对应的路由对象。
  • 路由与代码耦合:路由依赖于路由对象的硬编码,当某一路由发生变动时,势必需要修改对应的路由对象。当路由层级、路径发生改变时,甚至可能面临的是整个路由对象数组的重写。
  • 路由之间进行跳转时的硬编码。

目的很简单,在开发过程中,开发者仅需要做两件事即可:

  • 为这个路由命名
  • 在对应的目录下创建 .vue 文件

开发过程中只需要做这两步,无需再去关心路由对象如何编写。

甚至可以忽略第一步,对于小型项目而言。

自动化路由规则

这些规则一部分是给开发者看,另一部分是给程序看的:

  1. 路由目录需要指定
  2. 路由目录下,每一层(一个文件夹即为一层) 必须 要有一个 Layout.vue 文件,用来渲染子路由。
  3. 路由目录下的组件路径即为其对应的路由,比如指定了 src/views 文件夹,里面的 src/views/admin/users 对应的路由即是: localhost/admin/users
  4. 路由目录下不区分大小写,统一转换成小写处理。

以上便是我们制定的自动化路由规则。

定义

先提取出三个概念:

自动化路由的提供者,它就是 对外 开放的接口,开发者只需要使用它就可以。

视图,指的是一个视图组件的相关信息,比如路径、名称等等。

路由,指的是解析视图之后对应的路由对象,用于生成 vue-router 的路由对象。

开始开发

由于代码过长,这里将代码上传至 Github , 有兴趣的童鞋可以去看看。

这里只描述一下整体流程以及关键部分的代码思路。

  1. 先通过 require.context 获取到指定目录下的所有 .vue 文件。
  2. 通过前缀以及排序操作,将其还原成目录结构。
  3. 通过还原的目录结构,进行解析。
  4. 将解析后的结构转换成路由对象。

其中最关键的地方便是通过 require.context 获取到的文件列表还原成原来的树形结构。

还原成树形结构之后就可以对应树形结构进行路由对象的生成了。

首先将文件列表进行排序,根据文件的深度进行排序,深度浅的在前,深的在后。

_getViews(dir) {
  let views = [];

  let keys = dir.keys();
  for (let index in keys) {
    let path = keys[index];
    let component = dir(path);
    views.push(View.create(path, component.default || component))
  }
  views = views.sort((x, y) => { return x.Deep > y.Deep ? 1 : -1; });
  return views;
}

根据排序后的列表对目录结构进行还原:

/**
 * 解析views,生成对应的目录结构
 * @private
 */
_generateDirectory() {
  for (let index in this._views) {
    let view = this._views[index];
    this._directory.addView(view);
  }
}

addView 方法:

addView(view) {
  if(this.isCurrentDirectoryView(view)) {
    this._views.push(view);
  } else if(this._isInSubDirectory(view)) {
    this._addInSubDirectory(view);
  } else {
    let newSubDirectory = this._createSubDirectory(view);
    newSubDirectory.addView(view);
    this._subDirectory.push(newSubDirectory);
  }
}

对于目录还原时有三种可能:

  • 这个文件就是当前目录下的文件
  • 这个文件是当前目录下已有子目录的文件
  • 这个文件是当前目录下子目录的文件,且为首次出现

将目录还原后,就可以根据目录生成对应的路由对象。并且在生成时可以做一些定制化的需求,比如开篇提出来的需求:

  • 如果当前文件是 Layout.vue ,即默认为当前路由的根路由
  • 如果当前文件是 Index.vue , 即默认为当前层的空路由(根路由入口直接渲染)

使用方法,将 router.js 中的路由对象替换成自动生成的即可:

import Vue from 'vue'
import Router from 'vue-router'
import Generator from './routerGenerator/generator';

Vue.use(Router);

let generator = new Generator(require.context('./views', true, /\.vue$/));

export default new Router({
 routes: [generator.generate()]
})

目录结构如下:

浅入深出Vue之自动化路由

效果如下:

浅入深出Vue之自动化路由

github地址: https://github.com/WhileKing/ea-router

npm地址: https://www.npmjs.com/package/ea-router

npm包安装使用:

npm i ea-router

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 #Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 #Javascript
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
js获取域名的方法
2015/01/27 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
python读取mysql数据绘制条形图
2020/03/25 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
办理信用卡工作证明
2014/01/11 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
施工工地安全标语
2014/06/07 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
十岁生日答谢词
2015/01/05 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python