浅入深出Vue之自动化路由

2024-09-27 08:21:50

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

“懒惰”是进步的动力

为什么要自动化路由

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

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

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

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

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

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

自动化路由规则

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

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

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

定义

先提取出三个概念：

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

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

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

开始开发

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

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

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

其中最关键的地方便是通过 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()]
})

目录结构如下：

效果如下：

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

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

npm包安装使用：

npm i ea-router

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue2.0项目实现路由跳转的方法详解

一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调
vue 解决addRoutes动态添加路由后刷新失效问题

前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击
Vue+axios 实现http拦截及路由拦截实例

现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了. 技术栈 vue2.0 vue-router axios 拦截器首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 这个项目我引入了element ui框架,所以我是结合element中loading和me
vue路由跳转时判断用户是否登录功能的实现

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha
详解Vue路由自动注入实践

什么是路由自动注入路由自动注入概念学习自nuxt,我们不需要在 router.js 中每次手动输入代码引入模块而是自动根据文件目录格式生成 router.js 我们把这个功能独立成一个 webpack 插件,并对相关功能进行了完善,而且实现了 vue-router 的所有核心功能更详细使用指南和文档可以查看我们的 github仓库举一个简单的列子,比如你的目录长这样 src ├── views │ ├── Login │ │ └── Index.vue │ └── User │ ├──
vue-router：嵌套路由的使用方法

模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>.  <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路
VueJs路由跳转——vue-router的使用详解

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> p
Vue.js路由组件vue-router使用方法详解

使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod
vue自动路由-单页面项目（非build时构建）

这是一个什么项目? 答:这是一个单页面的vue.js项目,主要为了实现在非build时,进行自动路由.简单点说,就是在请求页面时,根据url进行动态添加路由. 自动路由有什么限制吗? 答:有,因为是通过url进行动态添加,所以,在指定文件夹下,组件文件的相对路径必须与url有一定的关系.当前demo项目,url路径与modules文件夹下的组件相对路径一致.例如: url地址:localhost:5000/home/index 组件路径:modules/home/index/index.vue
浅入深出Vue之自动化路由

在软件开发的过程中,"自动化"这个词出现的频率是比较高的. 自动化测试 , 自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复 . 千篇一律的事情.人们总是想让它自己完成,来解放我们的双手. "懒惰"是进步的动力为什么要自动化路由路由自动化在于解决以下的问题: 每次新建页面时的重复操作:在路由文件中添加对应的路由对象. 路由与代码耦合:路由依赖于路由对象的硬编码,当某一路由发生变动时,势必需要修改对应的路由对象.当
浅入深出Vue之组件使用

组件在 vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题. 组件是什么官方的定义: 组件是可复用的 Vue 实例,并且可带有一个名字. 官方的定义已经非常简明了,组件就是一个实例. 如何使用组件在具体编写组件实例代码前,我们先来如下几个约定: 所有组件基于单文件组件,即一个 .vue文件就是一个组件 data 必须为一个函数 template 节点下只能有一个子节点约束不多,但最后两个需要牢记在心. 基于单文件组件的前提下,一个组件的基本构造如下: <template>
浅谈MySQL之浅入深出页原理

一.页的概览我们往 MySQL 插入的数据最终都是存在页中的.在 InnoDB 中的设计中,页与页之间是通过一个双向链表连接起来. 而存储在页中的一行一行的数据则是通过单链表连接起来的. 上图中的 User Records 的区域就是用来存储行数据的.那 InnoDB 为什么要这么设计?假设我们没有页这个概念,那么当我们查询时,成千上万的数据要如何做到快速的查询出结果?众所周知,MySQL 的性能是不错的,而如果没有页,我们剩下的只能是逐条逐条的遍历数据了. 那页是如何做到快速查询的呢?在当前
Python带你从浅入深探究Tuple(基础篇)

元组 Python中的元组容器序列(tuple)与列表容器序列(list)具有极大的相似之处,因此也常被称为不可变的列表. 但是两者之间也有很多的差距,元组侧重于数据的展示,而列表侧重于数据的存储与操作. 它们非常相似,虽然都可以存储任意类型的数据,但是一个元组定义好之后就不能够再进行修改. 元组特性元组的特点: 元组属于容器序列元组属于不可变类型元组底层由顺序存储组成,而顺序存储是线性结构的一种基本声明以下是使用类实例化的形式进行对象声明: tup = tuple((1, 2, 3,
开窗函数有浅入深详解（一）

在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成.为了解决这些问题,在2003年ISO SQL标准加入了开窗函数,开窗函数的使用使得这些经典的难题可以被轻松的解决. 目前在 MSSQLServer.Oracle.DB2 等主流数据库中都提供了对开窗函数的支持,不过非常遗憾的是 MYSQL 暂时还未对开窗函数给予支持. 为了更加清楚地理解,我们来建表并进行相关的查询(截图为MSSQLServer中的结果) MYSQL,MSSQLServe
vue 路由切换过渡动效滑入滑出效果的实例代码

效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;} .twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;} .twof
vue 自动化路由实现代码

1.需求描述在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由.为此我们在项目中会专门的一个文件夹来管理路由,如下图所示那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由.特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue,分别对应的事列表页,详情页和编辑页. 上图是我们的文件目录,views文件夹中存放的是所有的页面,goodsPlanni
vue router动态路由下让每个子路由都是独立组件的解决方案

vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r
vue 实现动态路由的方法

很多时候我们在项目的路由都是在前端配置好的但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染.不用在前端配置. 下面主要讲一下思路 1.和后台小哥哥沟通好数据,把我们前端配置的路由表数据给他,他就能看懂了 2.拿到数据需要我们自己再处理路由中的component后台是给不了的,这里我们只需要后台小哥哥按照我们提供的前端component路径给数据,我们循环加载就可以了 //view就是后台给的数据 return () => import(`@/view/modules/${
Vue.js框架路由使用方法实例详解

Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

浅入深出Vue之自动化路由

相关推荐

随机推荐