解密 Vue Router 的两种模式：hash 和 history

Vue Router 的两种模式

hash 模式

hash 模式是 Vue Router 的默认模式。在 hash 模式下，URL 中的哈希部分（#）后面的内容用于表示当前的路由。例如，如果当前路由是 /home，则 URL 将是 https://example.com/#/home。

hash 模式的优点在于，它不需要服务器端的支持，因此更易于部署。此外，hash 模式不会影响页面的历史记录，因此不会导致后退按钮无法正常工作。

hash 模式的缺点在于，它不那么美观，因为它在 URL 中添加了 # 符号。此外，hash 模式也不支持 HTML5 History API，因此某些功能（例如，前进和后退按钮）可能无法正常工作。

history 模式

history 模式是 Vue Router 的另一种模式。在 history 模式下，URL 中不包含 # 符号，而是使用 HTML5 History API 来管理路由。例如，如果当前路由是 /home，则 URL 将是 https://example.com/home。

history 模式的优点在于，它更美观，因为它不包含 # 符号。此外，history 模式支持 HTML5 History API，因此前进和后退按钮可以正常工作。

history 模式的缺点在于，它需要服务器端的支持，因此更难部署。此外，history 模式可能会影响页面的历史记录，因此可能会导致后退按钮无法正常工作。

如何选择适合您的项目

在选择 Vue Router 的模式时，您需要考虑以下几点：

• 您的服务器端是否支持 HTML5 History API？ 如果不支持，则您只能使用 hash 模式。
• 您是否需要前进和后退按钮正常工作？ 如果需要，则您需要使用 history 模式。
• 您是否介意 URL 中的 # 符号？ 如果介意，则您需要使用 history 模式。

一般来说，如果您使用的是 Node.js 或其他支持 HTML5 History API 的服务器端框架，则建议您使用 history 模式。如果您使用的是不支持 HTML5 History API 的服务器端框架，则您只能使用 hash 模式。