hash 模式

hash 就是指 url 后的 **# 号以及后面的字符。** hash也称作锚点，本身是用来做页面定位的，他可以使对应的 id 元素显示在可视区域内。

hash 模式就是通过改变 URL 中 **# 号后面的 hash 值**来切换路由，在通过 **`hashchange`** 事件来监听 hash 的改变从而控制组件的渲染。

```js
function cb = (event) => {
    console.log(event.oldUrl, event.newUrl);
    let hash = location.hash; // 获得 hash 值，例如 #add
}
window.addEventListener("hashchange", cb)
```

hash 发生变化的 url 都会被浏览器记录下来，所以浏览器的前进后退都可以用了

history 模式

history 模式利用了 HTML5 中新增的 **`pushState` 和 `replaceState`** 两个方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 historyAPI `back`、`forward` 和 `go` 的基础上，提供了**修改历史记录**的功能。

-   **`pushState(state, title, url)`**

    用来在浏览器历史中**添加记录**，但浏览器不会立刻向后端发送请求，**不会触发 `popstate` 事件**

-   **`replaceState(state, title, url)`**

    用来在浏览器历史中**修改记录**，但浏览器不会立刻向后端发送请求，**不会触发 `popstate` 事件**

    -   state：一个与指定网址相关的状态对象，**`popstate` 事件触发时，该对象会传入回调函数**。如果不需要这个对象，此处可以填null。
    -   title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
    -   url：新的网址，必须与当前页面处在同一个域（**不能跨域！！** ）。浏览器的地址栏将显示这个网址。
 同时提供了一个 **`popstate`** 事件来监控路由改变，但并不像 `hashchange` 一样改变了就会触发


-   **`popstate` 事件**

    -   `pushState` 和 `replaceState` 事件不会触发 `popstate` 事件

    -   当同一个文档的浏览历史（即**history对象**）出现变化时，才会触发 `popstate` 事件

        -   通过浏览器前进后退改变了 URL 会触发
        -   JS 调用 historyAPI 的 `back`、`forward` 和 `go` 等方法会触发

    -   使用的时候，可以为 `popstate` 事件指定回调函数。这个回调函数的参数是一个 `event` 事件对象，它的 `state` 属性指向 `pushState` 和 `replaceState` 方法为**当前URL所提供的状态对象**（即这两个方法的第一个参数）

        ```js
        window.addEventListener('popstate', function(event) {
            console.log(event.state)
        })
        ```

hash 模式与 history 模式的区别
- hash 模式下，仅 hash符号（#）之前的内容会被包含在请求中，如 www.11.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
- history 模式下，前端的 url 必须和实际后端发起请求的 url 一致，如www.222.com/aa/ 。如果后端缺少对 /aa/ 的路由处理，将返回404错误。此时需要在后端作出相应的调整（比如 nginx配置重定向）

最后

欢迎大家在评论区一起交流，一起进步！

前端路由，hash模式与history模式

hash 模式

history 模式

最后