Vue Router 使用history模式和hash模式的区别

在 Vue Router 中，可以使用 HTML5 History 模式和 Hash 模式来管理路由。它们之间的主要区别在于 URL 的形式和在不同环境中的使用情况。

### HTML5 History 模式
- **URL 形式**: 使用普通的 URL，不带 `#`。
- **工作原理**: HTML5 History 模式利用浏览器的 History API 来管理路由，通过修改 URL 路径而不引起页面的刷新。
- **示例**: 如果你的应用在 `http://yourdomain.com/`，一个名为 `home` 的路由会显示为 `http://yourdomain.com/home`。
- **优点**: 更加美观的 URL，没有 `#` 号，更接近传统的 URL 结构。
- **缺点**: 在使用 HTML5 History 模式时，需要服务器配置来支持前端路由，以避免刷新页面时返回 404 错误。

### Hash 模式
- **URL 形式**: URL 中带有 `#`，例如 `http://yourdomain.com/#/home`。
- **工作原理**: Hash 模式通过监听 URL 中的 hash（`#`）的变化来实现路由切换，不会触发页面的重新加载。
- **示例**: 如果你的应用在 `http://yourdomain.com/`，一个名为 `home` 的路由会显示为 `http://yourdomain.com/#/home`。
- **优点**: 兼容性好，不需要额外的服务器配置，适合在简单的静态页面中使用。
- **缺点**: URL 中带有 `#`，可能不够美观，也可能影响 SEO。

### 举例
```javascript
// Vue Router 配置示例

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: Home
  }
];

const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History 模式
  routes
});

export default router;
```

在上面的示例中，通过配置 `mode: 'history'`，Vue Router 将使用 HTML5 History 模式来管理路由。这使得路由的 URL 更加友好，不带 `#`，可以提供更好的用户体验。当用户访问 `http://yourdomain.com/home` 时，将会加载 `Home` 组件。

在使用 Vue Router 中的 HTML5 History 模式时，需要确保服务器能够正确处理路由请求，以避免在页面刷新或直接访问特定路由时返回 404 错误。这通常涉及到在服务器端设置一个通配符路由，以确保所有路由都指向你的 Vue 应用的入口文件。具体的配置方式取决于你使用的服务器软件，比如 Apache、Nginx 或者其他类型的服务器。

下面是针对不同服务器的配置示例：

Nginx 服务器配置

在 Nginx 服务器中，你可以在服务器配置文件中添加类似以下配置：

```nginx
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

这个配置会将所有的路由请求都指向 `index.html` 文件。

### 注意事项
- 配置完成后，确保重启服务器以使配置生效。
- 在配置时，要确保服务器支持 URL 重写，并将所有路由请求指向你的 Vue 应用的入口文件（通常是 `index.html`）。
- 这些配置的目的是确保当用户直接访问应用中的任何路由时都能正确加载应用，而不会返回 404 错误。

根据你的服务器环境选择合适的配置方式，并根据需要进行调整。如果你遇到问题，可以查看服务器的文档或寻求进一步的帮助。