vue-router的两种模式的区别
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。
### hash模式
hash模式背后的原理是`onhashchange`事件,可以在`window`对象上监听这个事件:
``` js
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
```
上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度上说明了原理。
更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。

网易云音乐,百度网盘就采用了hash路由,看起来就是这个样子:
```
http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list
```
### history路由
随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由

history api可以分为两大部分,切换和修改,[参考MDN](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
#### 切换历史状态
包括`back`,`forward`,`go`三个方法,对应浏览器的前进,后退,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):
``` js
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
```
#### 修改历史状态
包括了`pushState`,`replaceState`两个方法,这两个方法接收三个参数:stateObj,title,url
``` js
history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
console.log(event.state)
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
}
}
history.back();
history.forward();
```
通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。
### history模式怕啥
通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕**刷新**,**f5**,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
所以,如果你想在github.io上搭一个单页博客,就应该选择hash模式。比如[这个博客](https://imgss.github.io)
vue-router的两种模式的区别的更多相关文章
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- ACE_linux:Reactor与Proactor两种模式的区别
一.概念: Reactor与Proactor两种模式的区别.这里我们只关注read操作,因为write操作也是差不多的.下面是Reactor的做法: 某个事件处理器宣称它对某个socket上的读事件很 ...
- vue-router两种模式的区别
参考文献:https://blog.csdn.net/lla520/article/details/77894985/ https://segmentfault.com/a/1190000015123 ...
- vue-router 的两种模式的区别
Vue Router 是Vue官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认 hash 模式,还有一种是history模式. hash模 ...
- vue路由的两种模式,hash与history
对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义.前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求. 一.为 ...
- 在IDEA中将项目部署到Tomcat的方法及两种模式的区别
转自:https://www.jianshu.com/p/fb0ed26c35d5 1.添加tomcat服务器 点右上角编辑配置 编辑配置 点击左上角+选择tomcat服务器 添加tomcat ...
- MODBUS ASCII和RTU两种模式的区别、优缺点
转自:http://blog.sina.com.cn/s/blog_89f286ad0102uzju.html 下表是MODBUS ASCII协议和RTU协议的比较: 协议 开始标记 结束标记 校验 ...
- Unity下Iso和Persp两种模式的区别
Iso模式 平行视野.在Iso模式下,不论物体距离摄像头远近都给人的感觉是一样大的. Persp模式 透视视野.在persp模式下,物体在scene界面上所呈现的画面是给人一种距离摄像头近的物体显示的 ...
- 【转】Reactor与Proactor两种模式区别
转自:http://www.cnblogs.com/cbscan/articles/2107494.html 两种IO多路复用方案:Reactor and Proactor 一般情况下,I/O 复用机 ...
随机推荐
- 如何让Oracle释放undo表空间
如何让Oracle释放undo表空间 最佳答案 在日常的数据库维护和数据库编程中经常会遇到犹豫对大数据量做DML操作后是得ORACLE的undo表空间扩展到十几个G或者几十个G 但是这些表空间 ...
- Linux服务器中安装Oracle
笔者手动安装成功 一,oracle安装前的准备与配置 1,修改stsctl.conf文件 Linux是为小文件设计的,Oracle数据库安装需要占用较多资源,要把各项参数调大. 使用vi编辑/etc/ ...
- Premiere&After Effects的实时预览插件开发
一.介绍 Adobe Premiere和After Effects在影视编辑.渲染领域已经得到广泛应用.全景视频在相应工具拼接好后也可以导入Premiere/After Effects后也可进行剪辑. ...
- centos7修改网卡名称
[root@localhost ~]# cd /etc/sysconfig/network-scripts/[root@localhost network-scripts]# mv ifcfg-eno ...
- Selenium+Java显示等待和隐式等待
描述:用来操作界面上的等待时间,显示等待是等待某一条件满足,条件满足后进行后面的操作:隐式等待是给出一个等待时间,在时间到达之前若满足条件,则立即执行后续操作. public class TestSe ...
- css 实现三角形、圆形
.div { width:0px; height:0px; border:100px solid red; border-color:red red transparent transparent; ...
- Java微信公众平台开发之公众号支付(微信内H5调起支付)
官方文档点击查看准备工作:已通过微信认证的公众号,必须通过ICP备案域名(否则会报支付失败)借鉴了很多大神的文章,在此先谢过了 整个支付流程,看懂就很好写了 一.设置支付目录 在微信公众平台设置您的公 ...
- Android -- 从源码的角度一步步打造自己的TextView
1,自定义控件一直是我们的痛点,今天就和大家一点点去了解了解,首先一般的自定义控件都是继承于View类,所以我们先来看看view的一些重要的方法,这是官方文档,大家想了解更多也可以去看看,这里我展示对 ...
- python学习===从一个数中分解出每个数字
题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1 ...
- VS2013 C++代码运行问题
VS2013(工具集V120)下编译的C++代码,在win7运行错误,提示缺少msvcr230.dll,但是添加dll之后无效. 解决办法: 官方下载VS2013的C++运行库: vcredist_x ...