永远不要停止学习的步伐
【34.Vue Router--路由的两种工作模式
】
单页应用SPA的目标是不刷新浏览器,通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标,可以通过前端路由的2种工作模式实现:hash模式和history模式。
1、hash模式
① 特点
对于一个URL来说,hash 就是指 url 路径后的 #
号以及后面的字符。
② 注意点
hash值变化不会引起浏览器向服务器发出请求
,尽管浏览器没有请求服务器,但是页面状态和url是关联起来。
③ 用法(默认是hash)
mode: 'hash'
2、history模式
① 特点
URL路径中没有 #
号
② 注意点
history 模式改变 url 会导致浏览器向服务器发送请求
,刷新页面时,如果服务器没有对应的资源或者响应,页面会出现404
③ 用法
mode: 'history'
3、两种工作模式的区别
hash模式 | history模式 |
---|---|
地址中永远带有 # 符,不美观 | 美化后的hash模式,会去掉路径中的 “#” |
基于URL传参,如果要传递复杂的数据,会有体积的限制 | 不仅可以在URL里放参数,还可以将数据存放在一个特定的对象中 |
当 URL 改变时,页面不会重新加载,不会刷新 | 不怕前进后退跳转,就怕刷新(如果后端没有准备的话),因为刷新是实实在在地去请求服务器了。【消耗的时间很多还很慢】 |
地址通过第三方app分享,若app校验严格,则地址会被标记为不合法 | abstract 路由模式部署上线时需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误 |
兼容IE8以上 | 容IE10以上 |
两种工作模式的原理
1、hash模式原理
hash模式的实现原理是通过监听hashChange事件来实现的
- hash值改变会触发hash Change事件,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>hash模式工作原理</title>
<h2>hash模式工作原理演示</h2>
</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);
总结:
- 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
- hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
- hash模式:
- 地址中永远带着#号,不美观 。
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
- history模式:
- 地址干净,美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
————————————————
版权声明:本文为CSDN博主「离奇6厘米」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Vest_er/article/details/127132819
后续等vue2所有基础知识学完后,整个学习笔记的代码会上传到github