浅入深出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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
node.js中 stream使用教程
Aug 28 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP微信支付实例解析
2016/07/22 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Django基础知识与基本应用入门教程
2018/07/20 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
毕业自我鉴定
2013/11/05 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
初中英语教学反思
2014/01/25 职场文书
六年级数学教学反思
2014/02/03 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
硕士生工作推荐信
2014/03/07 职场文书
班级标语大全
2014/06/21 职场文书
社区志愿者活动总结
2014/06/26 职场文书
廉政承诺书范文
2015/04/28 职场文书