vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

當你使用 history 模式時，URL 就像正常的 url，例如 yoursite.com/user/id，也好看…

個人理解

上面是官方的解釋，文檔的一貫風格，只給懂的人看。兩年前我比現在還菜的時候，看了這段話表示他在說個錘子，直接跳過了。

我不講:hammer:，直接舉:chestnut:

一般的我們把項目放到服務器上，路由都是在服務器中設置的。

比如網站 https://www.text.com/ 中 admin目錄下有一個 login.html 的頁面。當用戶輸入 https://www.text.com/admin/login ，先解析 www.text.com 域名部分得到服務器 ip 和 端口號，根據 ip 和 端口號找到對應的服務器中的對應的程序，然后在程序解析 /admin/login 路徑知道了你要找的是 admin 目錄下的 login.html 頁面，然后就返回給你這個頁面。

這是正常的方式，服務器控制一個路由指向一個頁面的文件（不考慮重定向的情況），這樣我們的項一般有多少個頁面就有多少個 html 文件。

而 vue 中，我們打包好的文件其實是只有一個 index.html ，所有的行為都是在這一個頁面上完成。用戶的所有的路由其實都是在請求 index.html 頁面。

假設承載 vue 項目 index.html 也是在 admin 目錄下，vue 項目中也有一個 login 頁面，那對應的url就是 https://www.text.com/admin/#/login 。

這個 url 由三部分組成，是 www.text.com 是域名， /admin 是項目所在目錄，和上面一樣這個解析工作是由服務器完成的，服務器解析出 /admin 的路由，就返回給你 index.html 。 /#/login 是 vue-router 模擬的路由，因為頁面所有的跳轉 vue 都是在 index.html 中完成的，所以加上 # 表示頁內切換。假設切換到 home 頁面，對應的 html 文件還是 index.html ，url 變成 https://www.text.com/admin/#/home ，vue-router 判斷到 /#/home 的改變而改變了頁面 dom 元素，從而給用戶的感覺是頁面跳轉了。這就是 hash 模式。

那我們就知道了，正常的 url 和 hash 模式的區別，頁面的 js 代碼沒辦法獲取到服務器判斷路由的行為，所以只能用這種方式實現路由的功能。

而 history 模式就是讓 vue 的路由和正常的 url 一樣，至于怎么做下文會說到。

為什么需要實現

說怎么做之前，先說說為什么需要 history 模式。官方文檔說了，這樣比較好看。emmmmmm，對于直接面向消費者的網站好看這個確實是個問題，有個 /# 顯得不夠大氣。對于企業管理的 spa 這其實也沒什么。