如何配置Vue Router的history模式并理解其运作原理？

本文共计1839个文字，预计阅读时间需要8分钟。

Vue-router 分为 hash 和 history 两种模式，前者是默认模式，后者更接近真实 URL。URL 表现形式为 http://yoursite.com。

vue-router分为 hash和 history模式，前者为其默认模式，url的表现形式为 yoursite.com#home，比较难看。后者的url表现形式为 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，但不配置后端。