浏览器返回hash，浏览器返回hash重写：如何更新URL？

1. 什么是hash？

当我们访问一个网站时，URL 地址可能会包含一个 # 符号，后跟字符串，这个 # 后面的字符串就是 hash。Hash 通常用来保存当前页面的状态或者位置，通过改变 hash 可以不刷新页面，同时也可以与其他页面进行交互。也就是说，hash 可以通过改变字符串来更新 URL。

2. 如何获取和修改 hash？

获取当前页面的 hash 可以使用 JavaScript 中的 window.location.hash 属性。修改 hash 可以直接将新的字符串赋值给此属性。如下所示：

```javascript

// 获取 hash

var hash = window.location.hash;

// 修改 hash

window.location.hash = '#newHash';

```

3. 如何监听 hash 的改变？

我们可以使用 JavaScript 中的 hashchange 事件来监听 hash 的改变。当页面的 hash 发生改变时，会触发此事件。如下所示：

```javascript

window.addEventListener('hashchange', function() {

// hash 改变后的处理逻辑

});

```

4. 如何更新 URL？

当我们修改了页面的 hash 后，URL 中的内容并不会随之改变。为了更新 URL，我们可以使用 history API 中的 pushState 或 replaceState 方法。这两个方法都可以修改 URL 的 path、search 和 hash，且不会刷新页面。

pushState 方法将新的 URL 添加到浏览器的历史记录中，而 replaceState 方法则用新的 URL 替换当前的历史记录。如下所示：

```javascript

// pushState

history.pushState(null, '', '#newHash');

// replaceState

history.replaceState(null, '', '#newHash');

```

5. 浏览器返回 hash 重写的实现

有时候我们希望页面在用户使用后退或前进功能时可以回到指定的 hash，而不是返回到之前的页面。我们可以通过监听 popstate 事件来实现这个功能。如下所示：

```javascript

window.addEventListener('popstate', function() {

// 判断当前 hash 是否需要重写

if (window.location.hash === '#needRewrite') {

// 更新 URL

history.replaceState(null, '', '#newHash');

// 处理当前页面的逻辑

}

});

```

6. 注意事项

需要注意的是，如果直接修改 URL 中的 path 或 search，会导致页面刷新，而不是像修改 hash 那样不刷新页面。因此，在使用 pushState 或 replaceState 方法时，应该仅仅修改 hash 部分，而不改变其他部分。

7. 总结

在开发 Web 应用时，hash 可以用来保存页面状态，同时也可以与其他页面进行交互。我们可以通过 JavaScript 来获取和修改 hash，也可以监听 hash 的改变。为了更新 URL，我们可以使用 history API 中的 pushState 或 replaceState 方法。如果需要浏览器返回时回到指定的 hash，可以通过监听 popstate 事件来实现。

文章TAG：浏览  浏览器  返回  hash  浏览器返回hash