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 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
咖啡的种类和口感
2021/03/03 新手入门
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
举例讲解Python中is和id的用法
2015/04/03 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python高阶爬虫实战分析
2018/07/29 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
奥巴马连任演讲稿
2014/05/15 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
国庆节标语大全
2014/10/08 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
礼仪培训心得体会
2016/01/22 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL