浅析前端路由简介以及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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
node网页分段渲染详解
Sep 05 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php实现监听事件
2013/11/06 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
迟到检讨书400字
2014/01/13 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2016天猫双十一广告语
2016/01/28 职场文书