vue-router中的hash和history两种模式的区别


Posted in Javascript onJuly 17, 2018

众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。

hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

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一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。

vue-router中的hash和history两种模式的区别

网易云音乐,百度网盘就采用了hash路由,看起来就是这个样子:
http://music.163.com/#/friend

https://pan.baidu.com/disk/home#list/vmode=list

history路由

随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由

vue-router中的hash和history两种模式的区别

history api可以分为两大部分,切换和修改,参考MDN

切换历史状态

包括back,forward,go三个方法,对应浏览器的前进,后退,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

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模式。

总结

以上所述是小编给大家介绍的vue-router中的hash和history两种模式的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
理解javascript模块化
Mar 28 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
基本DOM节点操作
Jan 17 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 #Javascript
SVG实现时钟效果
Jul 17 #Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 #Javascript
基于D3.js实现时钟效果
Jul 17 #Javascript
vue生成token并保存到本地存储中
Jul 17 #Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 #Javascript
使用svg实现动态时钟效果
Jul 17 #Javascript
You might like
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Python实现统计文本文件字数的方法
2017/05/05 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
django如何实现视图重定向
2019/07/24 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python使用Geany编辑器配置方法
2020/02/21 Python
会计专业毕业生求职信分享
2014/01/03 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
学校交通安全责任书
2014/08/25 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
学籍证明模板
2015/06/18 职场文书
民主生活会主持词
2015/07/01 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis