Vue Router 模式

一、前言

在以往的項目中路由模式都是使用默認的 hash，最近的一個項目中用到了 history 模式，但是出現一些問題。在這里對着兩種模式做一個對比。

二、hash 模式

在 Vue Router 中默認使用的是 hash 模式，所以在使用這種模式是不需要設置的，直接默認就行。

const router = new VueRouter({
  routes: [...]
})

在請求路由的時候是使用 URL 的 hash 來模擬完整的 URL，所以當 URL 改變時，頁面不會重新加載。

具體如下所示：

http://localhost:8000/#/home

看到這個類似於以往使用的錨點一樣。

所以頁面的請求和路由是可以完全分開的（子所以這樣說是為了和 history 對應）。這樣的話頁面的路由全部由前端進行控制，對應沒有匹配的路由可以設置一個 404 頁面。

特點以及原理：

1、url 中 # 后面的是路由（類似以前經常用的錨點）

2、當路由改變時，url # 后面路由改變，這時頁面不會重新加載

3、是通過 window 的 hashChange 進行監聽改變，並作出對應的頁面改變

三、history 模式

聲明 router 的時候如果使用 history 模式需要顯示設置：

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

使用 history 模式后 URL 就像正常的 URL：

http://localhost:8000/home

特點以及原理：

1、服務端也需要配置一個靜態頁面，當 URL 匹配不到任何資源的時候返回這個靜態頁面

2、使用代理的時候，最好把 pathRewrite 設置為和路由不一樣的，否則可能會導致請求路由時也被代理，但是返回的不是想要的靜態頁面

3、url 形式和一般的 url 一樣

4、是通過 H5 中的 History Interface 新增的 pushState() 和 replaceState() 兩個方法實現

5、瀏覽器的 go、forward、back 記錄歷史，上面兩個方法可以對這些歷史記錄進行修改，當修改 url 時，不會立即向后端發送請求。

 

對於具體的原理分析參考：單頁面路由實現原理