vue中單頁應用如何實現前端路由

這篇文章將為大家詳細講解有關vue中單頁應用如何實現前端路由，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

通常 SPA 中前端路由有2種實現方式：

1. window.history

2. location.hash

下面就來介紹下這兩種方式具體怎么實現的

一.history

1.history基本介紹

window.history 對象包含瀏覽器的歷史，window.history 對象在編寫時可不使用 window 這個前綴。history是實現SPA前端路由是一種主流方法，它有幾個原始方法：

1. history.back() - 與在瀏覽器點擊后退按鈕相同

2. history.forward() - 與在瀏覽器中點擊按鈕向前相同

3. history.go(n) - 接受一個整數作為參數，移動到該整數指定的頁面，比如go(1)相當于forward()，go(-1)相當于back()，go(0)相當于刷新當前頁面

4. 如果移動的位置超出了訪問歷史的邊界，以上三個方法并不報錯，而是靜默失敗

在HTML5，history對象提出了 pushState() 方法和 replaceState() 方法，這兩個方法可以用來向歷史棧中添加數據，就好像 url 變化了一樣（過去只有 url 變化歷史棧才會變化），這樣就可以很好的模擬瀏覽歷史和前進后退了，現在的前端路由也是基于這個原理實現的。

2.history.pushState

pushState(stateObj, title, url) 方法向歷史棧中寫入數據，其第一個參數是要寫入的數據對象（不大于640kB)，第二個參數是頁面的 title, 第三個參數是 url (相對路徑)。

1. stateObj ：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null。

2. title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。

3. url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

關于pushState，有幾個值得注意的地方：

pushState方法不會觸發頁面刷新，只是導致history對象發生變化，地址欄會有反應,只有當觸發前進后退等事件（back()和forward()等）時瀏覽器才會刷新

這里的 url 是受到同源策略限制的，防止惡意腳本模仿其他網站 url 用來欺騙用戶，所以當違背同源策略時將會報錯

3.history.replaceState

replaceState(stateObj, title, url) 和pushState的區別就在于它不是寫入而是替換修改瀏覽歷史中當前紀錄，其余和 pushState一模一樣

4.popstate事件

定義：每當同一個文檔的瀏覽歷史（即history對象）出現變化時，就會觸發popstate事件。

注意：僅僅調用pushState方法或replaceState方法 ，并不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用JavaScript調用back、forward、go方法時才會觸發。另外，該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發。

用法：使用的時候，可以為popstate事件指定回調函數。這個回調函數的參數是一個event事件對象，它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態對象（即這兩個方法的第一個參數）。

5.history實現spa前端路由代碼

<a class="api a">a.html</a>
<a class="api b">b.html</a>
 // 注冊路由
 document.querySelectorAll('.api').forEach(item => {
  item.addEventListener('click', e => {
  e.preventDefault();
  let link = item.textContent;
  if (!!(window.history && history.pushState)) {
   // 支持History API
   window.history.pushState({name: 'api'}, link, link);
  } else {
   // 不支持,可使用一些Polyfill庫來實現
  }
  }, false)
 });

 // 監聽路由
 window.addEventListener('popstate', e => {
  console.log({
  location: location.href,
  state: e.state
  })
 }, false)

popstate監聽函數里打印的e.state便是history.pushState()里傳入的第一個參數，在這里即為{name: 'api'}

二.Hash

1.Hash基本介紹

url 中可以帶有一個 hash http://localhost:9000/#/a.html

window 對象中有一個事件是 onhashchange，以下幾種情況都會觸發這個事件：

1. 直接更改瀏覽器地址，在最后面增加或改變#hash；

2. 通過改變location.href或location.hash的值；

3. 通過觸發點擊帶錨點的鏈接；

4. 瀏覽器前進后退可能導致hash的變化，前提是兩個網頁地址中的hash值不同。

2.Hash實現spa前端路由代碼

 // 注冊路由
 document.querySelectorAll('.api').forEach(item => {
  item.addEventListener('click', e => {
  e.preventDefault();
  let link = item.textContent;
  location.hash = link;
  }, false)
 });

 // 監聽路由
 window.addEventListener('hashchange', e => {
  console.log({
  location: location.href,
  hash: location.hash
  })
 }, false)

hash模式與history模式，這兩種模式都是通過瀏覽器接口實現的，除此之外vue-router還為非瀏覽器環境準備了一個abstract模式，其原理為用一個數組stack模擬出瀏覽器歷史記錄棧的功能。當然，以上只是一些核心邏輯，為保證系統的魯棒性源碼中還有大量的輔助邏輯，也很值得學習。

三、兩種模式比較

• pushState設置的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設置與當前同文檔的URL

• pushState設置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中；而hash設置的新值必須與原來不一樣才會觸發記錄添加到棧中

• pushState通過stateObject可以添加任意類型的數據到記錄中；而hash只可添加短字符串

• pushState可額外設置title屬性供后續使用

四、history模式的一個問題

我們知道對于單頁應用來講，理想的使用場景是僅在進入應用時加載index.html，后續在的網絡操作通過Ajax完成，不會根據URL重新請求頁面，但是難免遇到特殊情況，比如用戶直接在地址欄中輸入并回車，瀏覽器重啟重新加載應用等。
hash模式僅改變hash部分的內容，而hash部分是不會包含在HTTP請求中的：

http://oursite.com/#/user/id // 如重新請求只會發送http://oursite.com/

故在hash模式下遇到根據URL請求頁面的情況不會有問題。

而history模式則會將URL修改得就和正常請求后端的URL一樣

http://oursite.com/user/id

在此情況下重新向后端發送請求，如后端沒有配置對應/user/id的路由處理，則會返回404錯誤。

官方推薦的解決辦法是在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。同時這么做以后，服務器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，在 Vue 應用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。或者，如果是用 Node.js 作后臺，可以使用服務端的路由來匹配 URL，當沒有匹配到路由的時候返回 404，從而實現 fallback。

關于“vue中單頁應用如何實現前端路由”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。