Vue Router history模式的配置方法及其原理

vue-router分为 hash和 history模式，前者为其默认模式，url的表现形式为 http://yoursite.com#home，比较难看。后者的url表现形式为 http://yoursite.com/home，比较美观。

但如果要使用 history模式，我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。

history模式的配置方法

我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。

首先要将 mode设置为 history：

const router = new VueRouter({ mode: 'history', routes: [...]})

然后设置后端（这里采用的nginx）：

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

然后就......没了！显然官方的教程讲的比较简略，并且我们参照这个教程实际上还是会遇到一些问题。

history模式的配置实践及原理

强烈建议：阅读这部分之前，先看一下nginx的这部分文档和 这部分文档。

既然官方文档教我们这样做了，我们就按照它说的来实践一下。

只配置前端的情况

首先，我们将 mode设置为 history，但不配置后端。然后，假如我们的路由是长这个样子的：

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

我们用nginx部署项目，然后在地址栏输入 http://localhost:8080（这里配置的端口是8080），你会发现地址栏之后会变为 http://localhost:8080/home，并且 看起来一切正常， 似乎路由也可以正常切换而不会发生其他问题（实际上会发生问题，后面会进行讨论）。看起来好像不需要按官网告诉我们的那样配置后端也能实现 history模式，但如果你直接在地址栏输入 http://localhost:8080/home，你会发现你获得了一个404页面。

那么 http://localhost:8080为什么可以（部分）正常显示呢？道理其实很简单，你访问 http://localhost:8080时，静态服务器（这里是nginx）会默认去目标目录（这里为 location中 root所指定的目录）下寻找 index.html（这是nginx在端口后没有额外路径时的默认行为），目标目录下有这个文件吗？有！然后静态服务器返回给你这个文件，配合 vue-router进行转发，自然可以（部分）正常显示。

但如果直接访问 http://localhost:8080/home，静态服务器会去目标目录下寻找 home文件，目标目录下有这个文件吗？没有！所以自然就404了。

配置后端

为了达到直接访问 http://localhost:8080/home也可以成功的目的，我们需要对后端（这里即nginx）进行一些配置。