浅入深出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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
jQuery简单实现日历的方法
May 04 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
jquery replace方法去空格
May 08 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
Openlayers实现地图的基本操作
Sep 28 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP引用符&的用法详细解析
2013/08/22 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
js格式化时间小结
2014/11/03 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python类继承用法实例分析
2015/05/27 Python
python画折线图的程序
2018/07/26 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
django实现日志按日期分割
2020/05/21 Python
python 实用工具状态机transitions
2020/11/21 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
机械专业应届生求职信
2013/12/12 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
财务简历的自我评价
2014/03/05 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
科学发展观标语
2014/10/08 职场文书