vue项目的history模式

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模式后，我们可以通过`router.push(`或
`router.replace(`方法来进行页面跳转，其使用方式与hash模式下完全一样。

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

首先，由于history 模式使用了HTML5的history API，因此在一些旧版本的浏览器中可能会出现兼容性问题。

为了解决这个问题，Vue Router提供了一个fallback 选项，当浏览器不支持history API时，可以自动转换为hash模式。

其次，当使用history模式时，如果直接访问一个不存在的URL，服务器会返回404错误页面。

为了解决这个问题，我们需要在服务器端进行一些配置，将所有的URL都指向我们的index.html文件。

这样一来，当用户访问一个不存在的URL时，服务器会返回index.html，然后再由前端的Vue应用来处理该URL。

对于nginx服务器，我们可以使用以下配置：
```nginx
location /
try_files $uri $uri/ /index.html;
```
对于Apache服务器，我们可以使用以下配置：
```apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
```
总结一下，Vue的history模式通过使用HTML5的history API，可以使URL更加美观，并且更符合用户的使用习惯。

但同时也需要在服务器端进行一些配置，以确保在刷新页面或直接访问URL时能够正确地响应请求并返回对应的页面。