hash路由和history路由的区别

当我们构建前端应用时，路由是一个重要的概念。它允许我们在不刷新整个页面的情况下，根据URL的变化来加载不同的内容。在前端开发中，有两种常见的路由实现方式：哈希路由（Hash Routing）和历史路由（History Routing）。本文将介绍这两种路由方式的区别。

?hash路由

1. 哈希路由：?哈希路由是通过URL中的哈希符号（#）来表示路由路径的一种方式。例如，一个哈希路由的URL可能是这样的：http://example.com/#/home。在这个URL中，哈希符号后面的部分（/home）表示路由路径。

哈希路由的特点是：

• URL格式：使用哈希符号来表示路由路径。
• 页面变化：当哈希值发生变化时，浏览器不会向服务器发送请求，页面也不会重新加载。
• 事件监听：通过JavaScript监听hashchange事件，可以在哈希值变化时更新页面内容。

由于哈希路由不会引起页面的重新加载，它在单页应用（SPA）中被广泛使用。通过监听hashchange事件，我们可以根据哈希值的变化，动态地加载不同的组件或页面内容，从而实现页面的切换和更新。

history路由

1. 历史路由：?历史路由是通过改变URL的路径来表示路由的一种方式。例如，一个历史路由的URL可能是这样的：http://example.com/home。在这个URL中，路径部分（/home）表示路由路径。

历史路由的特点是：

• URL格式：使用真实的URL路径来表示路由路径。
• 页面变化：当URL发生变化时，浏览器会向服务器发送请求，服务器返回对应的页面内容，然后浏览器重新加载页面并显示新内容。

历史路由需要服务器的支持，以确保在刷新页面或直接访问特定URL时能够正确加载对应的内容。它更适用于传统的多页应用，其中每个路由对应着一个独立的页面。

?实现原理不同

hash: 当页面中的 hash 发生变化时，会触发hashChange事件，通过监听hashChange事件进行页面定位，渲染不同的内容;

history: 利用HTML5 History API 提供的 history.pushState方法或者 history.replaceState 方法，监听popstate事件，需要客户端和服务端共同的支持。

为什么history需要客户端和服务端共同支持？

历史路由（History Routing）是通过改变URL的路径来表示路由的一种方式。它需要客户端和服务端共同支持，以确保在刷新页面或直接访问特定URL时能够正确加载对应的内容。

具体来说，当我们使用历史路由时，客户端（浏览器）会向服务器发送请求，请求对应的页面内容。服务器需要根据请求的URL路径，返回对应的HTML页面。如果服务器没有正确配置，或者没有相应的路由规则，就会导致页面无法正确加载。

另外，由于历史路由使用真实的URL路径来表示路由，因此在使用浏览器的前进和后退按钮时，浏览器会向服务器发送请求，请求对应的页面内容。如果服务器没有正确配置，或者没有相应的路由规则，就会导致页面无法正确加载。

因此，为了确保历史路由的正常运行，需要客户端和服务端共同支持。客户端需要正确处理URL的变化，并向服务器发送请求获取对应的页面内容。服务端需要根据请求的URL路径，返回对应的HTML页面。

需要注意的是，如果使用哈希路由（Hash Routing），则不需要服务端的支持。因为哈希路由是通过URL中的哈希符号来表示路由路径的，不会触发浏览器向服务器发送请求。因此，哈希路由更适用于单页应用（SPA）等不需要服务器端渲染的场景。

总之，历史路由需要客户端和服务端共同支持，以确保在刷新页面或直接访问特定URL时能够正确加载对应的内容。

总结：

?哈希路由和历史路由是两种常见的前端路由实现方式。哈希路由使用URL中的哈希符号来表示路由路径，不会引起页面的重新加载，而历史路由通过改变URL的路径来表示路由，会触发页面的重新加载。哈希路由适用于单页应用，而历史路由适用于传统的多页应用。