浅入深出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 相关文章推荐
javascript将相对路径转绝对路径示例
Mar 14 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
解决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
晶体管来复再生式二管收音机
2021/03/02 无线电
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php数组使用规则分析
2015/02/27 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python绘制雪景图
2019/12/16 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
艺术设计专业个人求职信
2014/04/10 职场文书
文明市民先进事迹
2014/05/15 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android