区分vue-router的hash和history模式


Posted in Javascript onOctober 03, 2020

一、概念

为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。

前端路由的核心,就在于:改变视图的同时不会向后端发出请求。

为了达到这种目的,浏览器当前提供了以下两种支持:

1.hash——即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。

比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。

它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。

只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

二、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关联在了一起,这就是前端路由。

三、history模式

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

history api可以分为两大部分,切换和修改。

切换历史状态包括back、forward、go三个方法,对应浏览器的前进,后退,跳转操作。

修改历史状态包括了pushState、replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red')
history.back();
setTimeout(function(){
 history.forward();
 },0)
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
   document.body.style.color = 'red';
  }
}

通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色。

其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

四、history模式的问题

通过history api,我们丢掉了丑陋的#,但是它也有个问题:不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。

在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它的,所以没有问题。但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会刷出一个404来。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

如果使用nginx,后端配置如下:

location / {
 try_files $uri $uri/ /index.html;
}

以上就是区分vue-router的hash和history模式的详细内容,更多关于vue-router hash和history模式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
vue webpack打包优化操作技巧
Feb 22 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
vue路由跳转传参数的方法
May 06 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
Vue双向数据绑定(MVVM)的原理
Oct 03 #Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 #Javascript
js通过canvas生成图片缩略图
Oct 02 #Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 #Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 #Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 #Javascript
You might like
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
python处理大数字的方法
2015/05/27 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
django和flask哪个值得研究学习
2020/07/31 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
大专应届生个人简历的自我评价
2013/10/15 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
大学生创业感言
2014/01/25 职场文书
政府个人对照检查材料
2014/08/28 职场文书
退税申请报告怎么写
2015/05/18 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
nginx内存池源码解析
2021/11/20 Servers
Spring中的@Transactional的工作原理
2022/06/05 Java/Android