Vue路由的两种模式：hash、history

Vue.js提供了两种常见的路由模式，即Hash模式和History模式。

1. Hash模式：

• Hash模式使用URL的哈希部分（#）来模拟路由。在Hash模式下，URL的哈希部分会随着路由的变化而改变，但不会导致浏览器向服务器发送请求，也不会刷新页面。
• Hash模式的URL示例：http://example.com/#/home

1.1 优点：

• 兼容性好：Hash模式不依赖HTML5的History API，支持在所有现代浏览器和较旧的浏览器上运行。
• 简单易用：不需要服务器端配置，可直接在前端进行开发和调试。

1.2 缺点：

• URL不够美观：URL中包含哈希部分，可能不够友好和清晰。
• 有冗余：URL中的哈希部分不会被发送到服务器端，因此可能会导致一些分析工具无法获取到完整的URL路径。

2. History模式：

• History模式使用HTML5的History
  API来实现路由。在History模式下，URL不再包含哈希部分，看起来更加干净和友好。路由变化时，浏览器会向服务器发送请求，需要服务器端进行相应的配置来正确处理路由请求。
• History模式的URL示例：http://example.com/home

2.1 优点：

• URL美观：URL中不包含哈希部分，更加干净和友好。
• 无冗余：URL中的路径可以被服务器端获取，对SEO和分析工具更友好。

2.2缺点：

• 兼容性限制：History模式依赖HTML5的History API，较旧的浏览器可能不支持。
• 服务器配置：需要服务器端进行相应的配置，以确保在刷新页面或直接访问路由时能够正确地返回对应的Vue应用。

3. 区别

3.1 URL结构：

• Hash模式：在URL中使用哈希部分（#）来模拟路由。路由路径位于#后面，不会被发送到服务器端，只会在客户端进行解析和处理。
• History模式：使用HTML5的History API来实现路由，URL中不包含哈希部分。路由路径直接体现在URL的路径中，可以被发送到服务器端。

3.2 页面刷新：

• Hash模式：路由变化不会导致页面刷新，因为哈希部分的变化不会触发浏览器向服务器发送请求。
• History模式：路由变化会导致浏览器向服务器发送请求，可能会触发页面的刷新。需要服务器端进行相应的配置，以确保在刷新页面时能够正确返回对应的Vue应用。

3.3 兼容性：

• Hash模式：兼容性较好，支持在所有现代浏览器和较旧的浏览器上运行。
• History模式：依赖HTML5的History API，较旧的浏览器可能不支持，需要进行兼容性检测和处理。

3.4 URL美观性：

• Hash模式：URL中包含哈希部分，可能不够友好和清晰。
• History模式：URL中不包含哈希部分，更加干净和友好，提供更好的URL美观性和用户体验。

3.5 服务器配置：

• Hash模式：不需要服务器端配置，可以直接在前端进行开发和调试。
• History模式：需要服务器端进行相应的配置，以确保在刷新页面或直接访问路由时能够正确返回对应的Vue应用。