Vue-router中hash模式与history模式的区别详解


Posted in Vue.js onDecember 15, 2020

VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实。

小白回答:hash模式url带#号,history模式不带#号。

大牛解答:

形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传;

功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合,让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok了

正题开始

为了达到改变视图的同时不会向后端发出请求这一目的,浏览器当前提供了以下两种支持:

hash模式:即地址栏 URL 中的 # 符号

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

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

history模式:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)

这两个方法应用于浏览器的历史记录栈,在当前已有的 back()、forward()、go() 方法的基础之上,这两个方法提供了对历史记录进行修改的功能。当这两个方法执行修改时,只能改变当前地址栏的 URL,但浏览器不会向后端发送请求,也不会触发popstate事件的执行

因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由.

vue中的router有两种模式:hash模式(默认)、history模式(需配置mode: 'history')

Vue-router中hash模式与history模式的区别详解

vue中的hash模式

即地址栏 URL 中的 # 符号,这个#就是hash符号,中文名哈希符或锚点

比如这个 URL:http://www.baidu.com/#/home,hash 的值为 #/home

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

Vue-router中hash模式与history模式的区别详解

路由的哈希模式其实是利用了window.onhashchange事件,也就是说你的url中的哈希值(#后面的值)如果有变化,就会自动调用hashchange的监听事件,在hashchange的监听事件内可以得到改变后的url,这样能够找到对应页面进行加载

window.addEventListener('hashchange', () => {
  // 把改变后的url地址栏的url赋值给data的响应式数据current,调用router-view去加载对应的页面
  this.data.current = window.location.hash.substr(1)
})

vue中history模式

HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法(需要特定浏览器支持),用来完成 URL 跳转而无须重新加载页面,不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,就需要前端自己配置404页面。

Vue-router中hash模式与history模式的区别详解

pushState() 和 replaceState() 这两个神器的作用就是可以将url替换并且不刷新页面,好比挂羊头卖狗肉,http并没有去请求服务器该路径下的资源,一旦刷新就会暴露这个实际不存在的“羊头”,显示404(因为浏览器一旦刷新,就是去真正请求服务器资源)

那么如何去解决history模式下刷新报404的弊端呢,这就需要服务器端做点手脚,将不存在的路径请求重定向到入口文件(index.html),前后端联手,齐心协力做好“挂羊头卖狗肉”的完美特效

pushState方法、replaceState方法,只能导致history对象发生变化,从而改变当前地址栏的 URL,但浏览器不会向后端发送请求,也不会触发popstate事件的执行

popstate事件的执行是在点击浏览器的前进后退按钮的时候,才会被触发

window.addEventListener('popstate', () => {
 this.data.current = window.location.pathname
})

使用场景

一般场景下,hash 和 history 都可以,除非你更在意颜值,# 符号夹杂在 URL 里看起来确实有些不太美丽。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。 Vue-router 另外,根据 Mozilla Develop Network 的介绍,调用 history.pushState() 相比于直接修改 hash,存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL

pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中

pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串

pushState() 可额外设置 title 属性供后续使用

总结

传统的路由指的是:当用户访问一个url时,对应的服务器会接收这个请求,然后解析url中的路径,从而执行对应的处理逻辑。这样就完成了一次路由分发

而前端路由是不涉及服务器的,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换

到此这篇关于Vue-router中hash模式与history模式的区别详解的文章就介绍到这了,更多相关Vue-router中hash模式与history模式区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
8个非常实用的Vue自定义指令
Dec 15 #Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 #Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 #Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
You might like
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
js常见遍历操作小结
2019/06/06 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
python解析xml文件实例分析
2015/05/27 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
python自定义函数def的应用详解
2020/06/03 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
2014年班务工作总结
2014/12/02 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
安全检查汇报材料
2014/12/26 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
老乡聚会通知
2015/04/23 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL