Vue.js 中路由器的两种历史模式：hash 模式和 history 模式

Hash 模式

hash 模式是 Vue Router 的默认模式。在 hash 模式下，路径后面会携带一个 #，例如：

https://example.com/#/home

hash 模式的主要特点是：

• 简单易用： hash 模式不需要服务器端配置，非常容易设置。
• 兼容性好： hash 模式兼容所有浏览器，包括旧版本的浏览器。

但是，hash 模式也有一些缺点：

• URL 不美观： hash 模式下的 URL 会在路径后面携带一个 #，这会使 URL 看起来不那么美观。
• 搜索引擎不友好： hash 模式下的 URL 在搜索引擎中不会被正确索引，这可能会影响您的网站在搜索结果中的排名。

History 模式

history 模式是 Vue Router 的另一种历史模式。在 history 模式下，路径不会携带任何 #，例如：

https://example.com/home

history 模式的主要特点是：

• URL 美观： history 模式下的 URL 更加美观，与传统的 URL 格式一致。
• 搜索引擎友好： history 模式下的 URL 在搜索引擎中会被正确索引，这有助于提高您的网站在搜索结果中的排名。

但是，history 模式也有一些缺点：

• 需要服务器端配置： history 模式需要服务器端支持，您需要在服务器端进行一些配置才能使用 history 模式。
• 兼容性差： history 模式不兼容所有浏览器，旧版本的浏览器可能无法支持 history 模式。

如何选择合适的历史模式

在选择历史模式时，您需要考虑以下因素：

• 您的网站类型： 如果您的网站是一个静态网站，那么您可以使用 hash 模式。如果您的网站是一个动态网站，那么您需要使用 history 模式。
• 您的受众群体： 如果您的网站面向的是全球用户，那么您需要使用 hash 模式。如果您的网站面向的是特定国家或地区的用户，那么您可以使用 history 模式。
• 您的浏览器兼容性要求： 如果您的网站需要兼容旧版本的浏览器，那么您需要使用 hash 模式。如果您的网站不需要兼容旧版本的浏览器，那么您可以使用 history 模式。

总结

总的来说，hash 模式比较简单易用，兼容性好，但 URL 不美观，搜索引擎不友好。history 模式 URL 美观，搜索引擎友好，但需要服务器端配置，兼容性差。您需要根据自己的需求选择合适的历史模式。