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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Python 多维List创建的问题小结
2019/01/18 Python
django基础学习之send_mail功能
2019/08/07 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Django-migrate报错问题解决方案
2020/04/21 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
数学系毕业生的自我评价
2014/01/10 职场文书
文艺晚会主持词
2014/03/24 职场文书
党员干部承诺书范文
2014/03/25 职场文书
关于安全的标语
2014/06/10 职场文书
商标侵权律师函
2015/05/27 职场文书
2016年公司新年寄语
2015/08/17 职场文书
听课评课活动心得体会
2016/01/15 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
python开发飞机大战游戏
2021/07/15 Python
各国货币符号大全
2022/02/17 杂记