浅析前端路由简介以及vue-router实现原理


Posted in Javascript onJune 01, 2018

路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样

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 年之前,大家是通过 hash 来实现路由,url hash 就是类似于:

http://www.xxx.com/#/login

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

function matchAndUpdate () {
 // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

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

function matchAndUpdate () {
 // todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)

Vue router 实现

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

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
 mode: 'history',
 routes: [...]
})
new Vue({
 router
 ...
})

可以看出来 vue-router 是通过 Vue.use 的方法被注入进 Vue 实例中,在使用的时候我们需要全局用到 vue-router 的 router-view 和 router-link 组件,以及 this.$router/$route 这样的实例对象。那么是如何实现这些操作的呢?下面我会分几个章节详细的带你进入 vue-router 的世界。(阅读源码是有点枯燥,但是带着问题去了解,就感觉很有意思。如果你对 vue-router 的实现机制也存在一些疑问,可以一起探讨交流)

vue-router 实现 -- install

vue-router 实现 -- new VueRouter(options)

vue-router 实现 -- HashHistory

未完待续...

更多 blog

总结

以上所述是小编给大家介绍的前端路由简介以及vue-router实现原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue实现计算器功能
Feb 22 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
Vue中的混入的使用(vue mixins)
Jun 01 #Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 #Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 #Javascript
Express之托管静态文件的方法
Jun 01 #Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 #Javascript
详解Angular操作cookies方法
Jun 01 #Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
一些网络技术方面的面试题
2014/05/01 面试题
const和static readonly区别
2013/05/20 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
法定代表人授权委托书范文
2014/08/02 职场文书
淮海战役观后感
2015/06/11 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL