URL网址中的#是什么意思 -- flutter等单页应用常用的hash路由

前言

在现代的前端开发中，Flutter和React等框架广泛采用哈希路由（Hash Routing）来构建单页应用（SPA）。哈希路由的设计哲学源自URL中的#号，原本用于网页内的定位，但现在它在SPA中扮演着更为关键的角色。

正文

哈希路由的工作原理

哈希路由的核心在于使用URL中的哈希值（#号及其后的内容）来指示应用的当前状态，从而实现页面内容的动态更新而无需重新加载。这种机制使得用户在使用SPA时能够享受到流畅连贯的体验，因为应用可以仅加载变更的部分，而不是每次导航都重新加载整个页面。

示例

hash 属性是 Location 接口的一部分，用于返回一个字符串，其中包含一个 # 后跟 URL 的片段标识符 — 即 URL 尝试定位的页面上的 ID。片段不会进行 URL 解码。如果 URL 没有片段标识符，该属性将包含一个空字符串 ""12。

例如，如果我们有一个页面上的锚点链接：

<a id="myAnchor" href="/en-US/docs/Location.href#Examples">Examples</a>

通过以下 JavaScript 代码，我们可以获取到这个锚点的片段标识符：

const anchor = document.getElementById("myAnchor");
console.log(anchor.hash); // 返回 '#Examples'

这个属性在 Web Worker 中也是可用的1。

这里的“hash”指的是 URL 中的片段标识符，而不是与密码散列相关的“哈希”。

在React和Flutter中的应用

在React和Flutter等现代前端框架中，开发者会利用哈希路由来管理应用的页面跳转与状态变化。例如，一个SPA可能有一个URL如http://example.com/#/user/profile，其中的#/user/profile部分指示应用展示用户个人资料的组件。这种方式不仅提高了应用的加载速度，也使得页面切换更加平滑。

哈希路由的优点

兼容性强：哈希路由对于老旧的浏览器具有良好的兼容性，这得益于它不依赖于HTML5的History API。
用户体验优化：由于页面资源可被缓存，之后的导航只需加载少量数据，从而大大加快了页面的响应速度，提升用户体验。

面临的挑战及解决方案

尽管哈希路由有着明显的优势，但它也存在一些限制，特别是在SEO优化和路径管理方面。

SEO优化限制：传统上，哈希路由对SEO不友好，因为搜索引擎通常忽略URL中#后的部分。然而，通过采用服务器端渲染（SSR）等技术，可以有效地解决这一问题，使SPA也能被搜索引擎友好地索引。
路径管理问题：哈希路由不会将路径发送到服务器，这意味着所有的路由逻辑都需要在客户端处理。为了优化用户体验，开发者需要精心设计路由策略，确保应用中的前进和后退按钮能够按预期工作。