Vue学习第34天——路由的2种工作模式：hash和history的区别

最新推荐文章于 2024-03-01 20:31:40 发布

离奇6厘米

最新推荐文章于 2024-03-01 20:31:40 发布

阅读量780

点赞数 2

分类专栏： vue 文章标签：学习哈希算法 vue

本文链接：https://blog.csdn.net/Vest_er/article/details/127132819

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

单页应用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);