vue中hash路由和history路由的区别

Vue中的路由可以分为基于`hash`的路由和基于`history`的路由，它们的主要区别在于如何处理URL以及浏览器的历史记录。

### 基于hash的路由

#### 工作原理：

1. **URL变动**：当用户访问带有路由路径的页面时，URL看起来像是 `http://yourwebsite.com/#/path/to/page` 的形式。这里的`#`后的部分是hash值，而不是真正的HTTP请求路径的一部分。

2. **与服务器无关**：这种模式不需要改变服务器配置即可添加路由功能，因为hash值只是客户端内部用于区分不同页面状态的一个标记，并不会触发服务器的HTTP请求。

3. **兼容性**：几乎所有现代浏览器都支持hashchange事件，因此基于hash的路由在大多数设备上都能正常工作，包括老版本的IE。

4. **历史记录**：浏览器的前进、后退按钮通常不会影响到hash值的修改，这意味着每一次导航都不会创建新的历史条目。

5. **链接和书签**：通过hash值生成的链接容易被复制并粘贴到邮件或其他应用中，因为浏览器默认会忽略`#`及之后的部分。

### 基于history的路由

#### 工作原理：

1. **URL变动**：与基于hash的路由相反，基于history的路由在实际URL中改变了路径，看起来更像是正常的HTTP请求路径，如 `http://yourwebsite.com/path/to/page`。这需要通过特定API（例如HTML5 History API）进行操作。

2. **与服务器有关**：为了让基于history的路由正常工作，需要在服务器端进行配置，允许动态更改URL。例如，通过设置服务器的响应头（如`RewriteEngine On`），让服务器能够理解当前路径并返回相应的资源。

3. **浏览器历史**：每当你导航到一个新的页面时，浏览器的历史记录会自动更新，包含最近访问过的页面。这对于用户体验来说是一个加分项，因为它利用了浏览器原有的导航功能。

4. **链接和书签**：链接和书签使用的是实际的URL路径，而不是hash值。这使得外部共享链接更直接地指向内容所在的位置。

### 实现方式差异

- **安装和配置**：对于基于hash的路由（如Vue Router默认提供的方式），只需按照官方指南初始化Vue Router即可。而基于history的路由则通常涉及额外的配置步骤，如引入并配置`history`模式。

- **性能**：由于涉及到与服务器的交互，基于history的路由通常在初次加载时可能需要额外时间来完成页面的跳转。

### 使用场景差异

- **安全性敏感应用**：基于history的路由更适合安全性和隐私敏感的应用，因为它不使用易受攻击的hash机制。

- **移动应用开发**：对于原生移动应用而言，基于history的路由可能是首选方案，因为它更好地利用了平台的原生特性。

总的来说，选择哪种类型的路由依赖于项目的需求、目标平台、对性能的要求以及是否需要考虑SEO等其他因素。了解两者之间的差异可以帮助开发者做出最合适的选择。