vue route实现原理

简介: 后端路由路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,经常会看到这样http://www.xxx.com/login大致流程可以看成这样:(1)浏览器发出请求(2)服务器端监听到80端口或者443有请求过来,并解析url路径(3)根据服务器的路由配置,返回相应信息(可以是html文件,json数据,也可以是图片)(4)浏览器根据数据包的content-type来决定如何解析数据简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径来请求不同的资源,请求不同的页面是路由的其中一项功能。

后端路由

路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,经常会看到这样

http://www.xxx.com/login

大致流程可以看成这样:

(1)浏览器发出请求

(2)服务器端监听到80端口或者443有请求过来,并解析url路径

(3)根据服务器的路由配置,返回相应信息(可以是html文件,json数据,也可以是图片)

(4)浏览器根据数据包的content-type来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径来请求不同的资源,请求不同的页面是路由的其中一项功能。

前端路由

1、hash模式

随着ajax流行,异步数据请求交互运行在不刷新浏览器的情况下。而异步交互体验的更高级版本就是SPA——单页面应用。单页面应用不仅仅是在页是无刷新的,连页面吧跳转也是无刷新的,为了实现单页面应用,所以就有了前端路由。

类似于服务端路由,前端路由实现起来其实其实也很简单,就是匹配不同的url路径,进行解析,然后动态的渲染出该区域的html内容,但是这样存在一个问题,就是url每次变化的时候,都会造成页面的刷新,那解决的思路便是在改变url的情况下,保证页面不刷新,早2014年之前,大家是通过has来实现路由,url hash就类似于http://www.xxx.com/#/login

这种#后面hash值的变化并不会导致浏览器向服务器发送请求,也就不会刷新页面,另外每次hash值的变化,还会触发hashchange事件,通过这个事件我们就可以知道hash值发生了改变,然后我们便可以监听hashchange来实现更新页面部分内容的操作:

img_84f6e82ed9f815054a3481faf4379c38.png

2.history模式

14年以后H5标准发布,多了两个API,pushState和replaceState,通过这两个api可以改变url地址且不会发送请求,同时还有popstate事件,通过这些就能够用另一种方式来实现前端路由,单原理都是跟hash实现相同,用了H5的实现单页面板路由的URL就不会多出来一个#,变得更加美观,但是因为没有了#,所以当用户刷新页面之类的操作的时候,浏览器还是会给服务器发送请求,为了避免出现这种情况,所以这个实现要拂去其端的支持,需要把所有路由都重定向到根页面

img_51bcefc381e2ffc131552e3ec91bab5a.png

vue route的实现er

我们来看一下vue-route是如何定义的:

import Vueroute from 'vue-router'

Vue,use(Vueroute)

const router = new Vueroute({

          mode:'history',

         routes:[....]

})

new Vue({

            router

            .......

})

可以看出vue-router是通过Vue.use的方法被注入进去VUE实例中,在使用的时候我们需要全局用到vue-router的router-view和router-link组件,以及this.$router/$route这样的实例对象,那么是如何实现这些操作的呢?

经过上面的阐述,相信您已经对前端路由以及vue-router有了一些大致的了解。那么这里我们为了贯彻无解肥,我们来手把手撸一个下面这样的数据驱动的 router:

img_3ffd6ac3608b84a232d38a12a132eb55.png

思路整理

首先是数据驱动,所以我们可以通过一个route对象来表述当前路由状态,比如:

img_e08abad1c5fa49c77ac158eae156dd53.png

current.route内存放当前路由的配置信息,所以我们只要监听current.route的变化来动态render页面即可。

接着我们需要监听不同的路由变化,做相应的处理,以及实现hash和history模式。

数据驱动

这里我们延用vue数据驱动模型,实现一个简单的数据劫持,并更新视图,首先定义我们的observer

img_875baa7cb13650f71ab4baa2eae695ed.png

再接着,我们需要定义Dep和Watcher:

img_55ed235bf2a80ccee4c3f787acfbf3d4.png

到这里我们实现了一个简单的订阅-发布器,所以我们需要对current.route做数据劫持。一旦current.route更新,我们可以及时的更新当前页面:

img_79cfe6ed3e200de78ac0880995bce14c.png

恩....到这里,我们似乎已经完成了一个简单的响应式数据更新。其实render也就是动态的为页面指定区域渲染对应内容,这里只做一个简化版的render:

img_3947b6fc25fff20f5f264a688b043577.png

hash和histpry模式

接下来时hash和history模式的实现,这里我们可以沿用vue-router的思想,建立不同的处理模型便可。

img_80dad2634f3eade7e42fea728d71c615.png

当页面变化的时候,我们只需要监听hashchange和popstate事件,做路由转化transitionTo

img_d9bd7ae4d4a5b306e01501fdb7915a04.png

这样我们一方面通过this.current.route = targetRoute达到了对之前劫持数据的更新,来达到视图更新。另一方面我们又通过任务队列的调度,实现了基本的钩子函数beforeEach、beforeLeave、beforeEnter、afterEnter。

到这里其实也就差不多了,接下来我们顺带着实现几个API吧:

img_97ce1e3f6cbd0a60f6803a5ac30e9b48.png

到这里也就基本上结束了。源码地址:

https://github.com/muwoo/blogs/tree/master/src/router

相关文章
|
16天前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
108 17
|
14天前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
50 1
|
16天前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
28 1
|
16天前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
50 0
|
16天前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
29 0
|
2月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
269 4
|
21天前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
106 21
|
19天前
|
监控 JavaScript 前端开发
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
110 17
|
2月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
20天前
|
JavaScript 前端开发 UED
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
60 10