2024年5月11日发(作者：)

vue项目的history模式

Vue的history模式是Vue Router提供的一种路由模式。在history

模式下，Vue的URL不会有#符号，并且在浏览器的历史记录中会生成相

应的记录。

相对于默认的hash模式，history模式的URL更加美观，更贴近传

统的URL形式，更符合用户的使用习惯。因此，在实际开发中，我们常常

会选择使用history模式。

使用history模式需要在服务端进行一些配置，以确保在刷新页面或

直接访问URL时，服务器能够正确地响应请求并返回对应的页面。

在Vue项目中启用history模式非常简单，只需在创建Vue Router

实例时，将mode属性设置为'history'即可：

```javascript

const router = new VueRouter

mode: 'history',

routes: [...]

})

```

在启用history模式后，我们可以通过`(`或

`e(`方法来进行页面跳转，其使用方式与hash模式下完全

一样。

然而，history模式也有一些需要注意的地方。首先，由于history

模式使用了HTML5的history API，因此在一些旧版本的浏览器中可能会

出现兼容性问题。为了解决这个问题，Vue Router提供了一个fallback

选项，当浏览器不支持history API时，可以自动转换为hash模式。

其次，当使用history模式时，如果直接访问一个不存在的URL，服

务器会返回404错误页面。为了解决这个问题，我们需要在服务器端进行

一些配置，将所有的URL都指向我们的文件。这样一来，当

用户访问一个不存在的URL时，服务器会返回，然后再由前

端的Vue应用来处理该URL。

对于nginx服务器，我们可以使用以下配置：

```nginx

location /

try_files $uri $uri/ /;

```

对于Apache服务器，我们可以使用以下配置：

```apache

RewriteEngine On

RewriteBase /

RewriteRule ^$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . / [L]

```

总结一下，Vue的history模式通过使用HTML5的history API，可

以使URL更加美观，并且更符合用户的使用习惯。但同时也需要在服务器

端进行一些配置，以确保在刷新页面或直接访问URL时能够正确地响应请

求并返回对应的页面。