vue-router两种模式原理
本文最后更新于：2021年8月4日 晚上
vue-router的hash、history两种模式的原理以及优缺点
两种模式，创建路由实例时指定mode: 'hash'('history')
一、hash模式
本质是利用了window.onhashchange属性
当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（参见
location.hash）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>测试一下</div>
<script type="text/javascript">
window.onhashchange = function(event){
console.log(event.oldURL,event.newURL)
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
</script>
</body>
</html>缺点：只能操作#后的片段，下文的history则没有这个限制
二、history模式
本质是利用window.history对象
DOM
window对象通过history对象提供了对浏览器的会话历史的访问。允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对history栈中内容的操作
history实质是什么？可以F12打开控制台，键入window.history看看
- length
- scrollRestoration
- state
下面两个函数用于保存路径的状态
pushState
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对像，从而可以对页面状态进行还原
popState
只有在做出回退操作时，才会触发该事件
后退
window.history.back();前进
window.history.forward();跳转(前进/后退n次）
window.history.go(2);// 前进两次，相当于执行两次forward()
window.history.go(-2);// 后退两次，相当于执行两次back()设置状态(不同的url保存不同的state)
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';
}
}两者对F5刷新的处理：
hash
刷新后，发送请求http://www.test.com（#前的部分）
history
刷新后，发送请求http://www.test.com/inde
显然history模式下是有可能出现404的
缺点小结
hash：只能操作#后的片段，下文的history则没有这个限制
history：有可能出现404的情况
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！