location.hash的用法

什么是location.hash?

location.hash 是一个只读属性，它表示当前URL的片段标识符(fragment identifier)，在HTML中，URL由三部分组成：协议、域名、路径和查询字符串，查询字符串中的参数以问号(?)开头，参数之间用&符号分隔，每个参数的键值对用等号(=)连接，键和值之间用&符号分隔。https://www.example.com/path?key1=value1&key2=value2section1 中的 section1 就是URL的片段标识符。

如何获取location.hash的值？

要获取location.hash的值，可以使用JavaScript的window.location.hash属性。

var hash = window.location.hash;
console.log(hash); // 输出 "section1"

如何设置location.hash的值？

要设置location.hash的值，可以先去掉其前面的井号(),然后将新的值添加到URL中。

// 设置location.hash的值为 "section2"
window.location.hash = "section2";

这将使得浏览器导航到 https://www.example.com/path?key1=value1&key2=value2section2,并在页面上显示一个锚点链接，链接文本为 "section2"。

location.hash有哪些用途？

1、页面跳转：通过修改location.hash的值，可以直接跳转到页面内的某个位置，在一个包含多个章节的页面中，可以使用location.hash实现平滑滚动效果，当用户点击某个章节的标题时，页面会自动滚动到对应的位置。

2、路由控制：在单页应用(SPA)中，可以使用location.hash来实现路由控制，当用户点击不同的菜单项时，可以通过修改location.hash的值来改变当前加载的页面内容，这样可以避免每次页面刷新都需要重新加载整个应用。

3、状态管理：在一些前端框架(如React、Vue等)中，可以使用location.hash来存储组件的状态信息，可以在URL中添加一个哈希值作为参数，用于区分不同的组件状态，这样可以方便地切换组件的状态，而无需重新渲染整个组件树。

4、兼容性处理：在一些旧版本的浏览器中，可能不支持window.history API,但仍然支持window.location.hash属性，可以使用location.hash作为替代方案来实现一些历史导航功能。