1. 程式人生 > >vue-router實現單頁面路由原理

vue-router實現單頁面路由原理

      我們都知道,單頁面應用(SPA)的核心之一是: 更新檢視而不重新請求頁面;vue-rouetr在實現單頁面前端路由時,提供了兩種方式:Hash模式History模式;根據mode引數來決定採用哪一種方式。

       那為什麼這兩種方式能夠實現試圖更新不跳轉,其原因在於:

1、Hash模式:
      hash(#)是URL 的錨點,代表的是網頁中的一個位置,單單改變#後的部分,瀏覽器只會滾動到相應位置,不會重新載入網頁,也就是說 #是用來指導瀏覽器動作的,對伺服器端完全無用,HTTP請求中也不會不包括#;同時每一次改變#後的部分,都會在瀏覽器的訪問歷史中增加一個記錄,使用”後退”按鈕,就可以回到上一個位置;

2、History模式:
    HTML5 History API提供了一種功能,能讓開發人員在不重新整理整個頁面的情況下修改站點的URL,就是利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面;

通常情況下,我們會選擇使用History模式,原因就是Hash模式下URL帶著‘#’會顯得不美觀;但實際上,這樣選擇一不小心也會出問題;比如:

但當用戶直接在使用者欄輸入地址並帶有引數時:
Hash模式:xxx.com/#/id=5 請求地址為 xxx.com,沒有問題;
History模式: xxx.com/id=5 請求地址為 xxx.com/id=5,如果後端沒有對應的路由處理,就會返回404錯誤;

為解決這一問題,vue-router提供的方法是:

在服務端增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態資源,則應該返回同一個 index.html 頁面,這個頁面就是你 app 依賴的頁面。
給個警告,因為這麼做以後,你的伺服器就不再返回 404 錯誤頁面,因為對於所有路徑都會返回 index.html 檔案。為了避免這種情況,你應該在 Vue 應用裡面覆蓋所有的路由情況,然後在給出一個 404 頁面。或者,如果你使用 Node.js 伺服器,你可以用服務端路由匹配到來的 URL,並在沒有匹配到路由的時候返回 404,以實現回退。