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）進行一些配置。