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）会默认去目标目录（这里为
