vue-router中hash模式与history模式的区别


Posted in Vue.js onJune 23, 2021

vue-router有两种模式

  • hash模式
  • history模式

1.单页面应用

单页应用

1.只有一个html文件,整个网站的所有内容都在这一个html里,通过js来处理

2.不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的。为了实现单页应用 ==> 前后端分离 + 前端路由。(更新视图但不重新请求页面)

前端路由

实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,加载不同的组件,然后动态的渲染出区域 html 内容。

优点

良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力,

缺点

不利于SEO,初次加载耗时比较多

2.hash模式

原理:是onhashchange事件,可以在window对象上监听这个事件

vue-router默认的是hash模式

1.使用URL的hash来模拟一个完整的URL

2.当URL改变的时候,页面不会重新加载,也就是单页应用了

2.当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:

1.HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,

2.HasHistory.replace()替换到当前栈顶的路由

vue-router中hash模式与history模式的区别

3.history模式

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

  • history api可以分为两大部分:切换和修改

3.1 切换历史状态

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

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

3.2 修改历史状态

包括了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();

步骤

1.通过pushstate把页面的状态保存在state对象中

2.当页面的url再变回这个url时,可以通过event.state取到这个state对象

3.从而可以对页面状态进行还原

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

3.3 history模式怕啥

hash 和 history 的区别

history 模式

1.通过history api,我们丢掉了丑陋的#,但是它也有个毛病

2.不怕前进,不怕后退,就怕刷新,f5

——history模式会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

——所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。

ash模式下

1.前面的hashchange,你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。

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

总结

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

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Vue + iView实现Excel上传功能的完整代码
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Vue过滤器(filter)实现及应用场景详解
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Python对象属性自动更新操作示例
2018/06/15 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
员工手册编写范本
2015/05/14 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android