单页应用SPA的目标是不刷新浏览器,通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标,可以通过前端路由的2种工作模式实现:hash模式和history模式。
一、路由的两种工作模式
1、hash模式
① 特点
对于一个URL来说,hash 就是指 url 路径后的 #
号以及后面的字符。
② 注意点
hash值变化不会引起浏览器向服务器发出请求
,尽管浏览器没有请求服务器,但是页面状态和url是关联起来。
③ 用法(默认是hash)
mode: 'hash'
2、history模式
① 特点
URL路径中没有 #
号
② 注意点
history 模式改变 url 会导致浏览器向服务器发送请求
,刷新页面时,如果服务器没有对应的资源或者响应,页面会出现404
③ 用法
mode: 'history'
二、两种工作模式的区别
hash模式 | history模式 |
---|---|
地址中永远带有 # 符,不美观 | 地址更美观 |
基于URL传参,如果要传递复杂的数据,会有体积的限制 | 不仅可以在URL里放参数,还可以将数据存放在一个特定的对象中 |
地址通过第三方app分享,若app校验严格,则地址会被标记为不合法 | 部署上线时需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误 |
兼容IE8以上 | 容IE10以上 |
三、两种工作模式的原理
1、hash模式原理
hash模式的实现原理是通过监听hashChange事件来实现的
hash值改变会触发hashChange事件,hashChange事件获取当前的hash值调用对应的路由,从而修改页面内容。
hash值发生变化的URL会被浏览器记录下来,因此浏览器的进后退也能对其进行控制
在window对象上监听hashChange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<button id="btn">点我修改hash值</button>
<script>
let btn = document.querySelector("#btn")
btn.addEventListener("click", () => {
location.href = "#/user"
})
// hash值一旦修改就会触发
window.onhashchange = (event) => {
console.log(event.oldURL,event.newURL);
console.log(location.hash);
}
</script>
</body>
</html>
运行结果
2、history模式原理
history模式的实现原理是通过监听popstate事件来实现的
popstate事件只能监听history.go、forward、back这样的路由跳转方式;
popstate事件监听不到replace和push这两种路由跳转方式,可以通过调用 history.pushState和replaceState方法并且监听popstate事件来实现的
在window对象上监听popstate事件
window.onpopstate = (event)=> {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
//pushState() ,replaceState()需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL
history.pushState({page: 1}, "title 1", "?id=001");
history.replaceState({page: 3}, "title 3", "?id=002");
history.back();
history.forword();
history.go(2);