vuejs的路由實(shí)現(xiàn)原理是什么？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供宜賓網(wǎng)站建設(shè)、宜賓做網(wǎng)站、宜賓網(wǎng)站設(shè)計(jì)、宜賓網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、宜賓企業(yè)網(wǎng)站模板建站服務(wù)，10年宜賓做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

一般源碼中，都會(huì)用到 window.history 和 location.hash

history 實(shí)現(xiàn)

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

history.back()

與在瀏覽器點(diǎn)擊后退按鈕相同

history.forward()

與在瀏覽器中點(diǎn)擊按鈕向前相同

history.go(n)

接受一個(gè)整數(shù)作為參數(shù)，移動(dòng)到該整數(shù)指定的頁(yè)面，比如go(1)相當(dāng)于forward()，go(-1)相當(dāng)于back()，go(0)相當(dāng)于刷新當(dāng)前頁(yè)面
如果移動(dòng)的位置超出了訪問歷史的邊界，以上三個(gè)方法并不報(bào)錯(cuò)，而是靜默失敗

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

history.pushState

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

stateObj ：一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對(duì)象，popstate事件觸發(fā)時(shí)，該對(duì)象會(huì)傳入回調(diào)函數(shù)。如果不需要這個(gè)對(duì)象，此* 處可以填null。
title：新頁(yè)面的標(biāo)題，但是所有瀏覽器目前都忽略這個(gè)值，因此這里可以填null。
url：新的網(wǎng)址，必須與當(dāng)前頁(yè)面處在同一個(gè)域。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。
關(guān)于pushState，有幾個(gè)值得注意的地方：

pushState方法不會(huì)觸發(fā)頁(yè)面刷新，只是導(dǎo)致history對(duì)象發(fā)生變化，地址欄會(huì)有反應(yīng),只有當(dāng)觸發(fā)前進(jìn)后退等事件（back()和forward()等）時(shí)瀏覽器才會(huì)刷新
這里的 url 是受到同源策略限制的，防止惡意腳本模仿其他網(wǎng)站 url 用來欺騙用戶，所以當(dāng)違背同源策略時(shí)將會(huì)報(bào)錯(cuò)

history.replaceState

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

popstate事件

定義：每當(dāng)同一個(gè)文檔的瀏覽歷史（即history對(duì)象）出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件。
注意：僅僅調(diào)用pushState方法或replaceState方法 ，并不會(huì)觸發(fā)該事件，只有用戶點(diǎn)擊瀏覽器倒退按鈕和前進(jìn)按鈕，或者使用JavaScript調(diào)用back、forward、go方法時(shí)才會(huì)觸發(fā)。另外，該事件只針對(duì)同一個(gè)文檔，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔，該事件也不會(huì)觸發(fā)。
用法：使用的時(shí)候，可以為popstate事件指定回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)的參數(shù)是一個(gè)event事件對(duì)象，它的state屬性指向pushState和replaceState方法為當(dāng)前URL所提供的狀態(tài)對(duì)象（即這兩個(gè)方法的第一個(gè)參數(shù)）。

HISTORY實(shí)現(xiàn)SPA前端路由代碼

abc.html
123.html
rdhub
  // 注冊(cè)路由
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      if (!!(window.history && history.pushState)) {
        // 支持History API
        window.history.pushState({name: 'history'}, link, link);
      } else {
        // 不支持,可使用一些Polyfill庫(kù)來實(shí)現(xiàn)
      }
    }, false)
  });

  // 監(jiān)聽路由
  window.addEventListener('popstate', e => {
    console.log({
      location: location.href,
      state: e.state
    })
  }, false)
popstate監(jiān)聽函數(shù)里打印的e.state便是history.pushState()里傳入的第一個(gè)參數(shù)，在這里即為{name: 'history'}

hash

hash基本介紹

url 中可以帶有一個(gè) hash http://localhost:9000/#/rdhub.html

window 對(duì)象中有一個(gè)事件是 onhashchange，以下幾種情況都會(huì)觸發(fā)這個(gè)事件：

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

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

3. 通過觸發(fā)點(diǎn)擊帶錨點(diǎn)的鏈接；

4. 瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化，前提是兩個(gè)網(wǎng)頁(yè)地址中的hash值不同。

hash實(shí)現(xiàn)SPA前端路由代碼

rdhub
abc
123
hash
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      location.hash = link;
    }, false)
  });
  // 監(jiān)聽路由
  window.addEventListener('hashchange', e => {
    console.log({
      location: location.href,
      hash: location.hash
    })
  }, false)

hash模式與history模式，這兩種模式都是通過瀏覽器接口實(shí)現(xiàn)的，除此之外vue-router還為非瀏覽器環(huán)境準(zhǔn)備了一個(gè)abstract模式，其原理為用一個(gè)數(shù)組stack模擬出瀏覽器歷史記錄棧的功能。當(dāng)然，以上只是一些核心邏輯，為保證系統(tǒng)的魯棒性源碼中還有大量的輔助邏輯，也很值得學(xué)習(xí)。

兩種模式比較

pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL；而hash只可修改#后面的部分，故只可設(shè)置與當(dāng)前同文檔的URL

pushState設(shè)置的新URL可以與當(dāng)前URL一模一樣，這樣也會(huì)把記錄添加到棧中；而hash設(shè)置的新值必須與原來不一樣才會(huì)觸發(fā)記錄添加到棧中

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

pushState可額外設(shè)置title屬性供后續(xù)使用

history模式的一個(gè)問題

我們知道對(duì)于單頁(yè)應(yīng)用來講，理想的使用場(chǎng)景是僅在進(jìn)入應(yīng)用時(shí)加載index.html，后續(xù)在的網(wǎng)絡(luò)操作通過Ajax完成，不會(huì)根據(jù)URL重新請(qǐng)求頁(yè)面，但是難免遇到特殊情況，比如用戶直接在地址欄中輸入并回車，瀏覽器重啟重新加載應(yīng)用等。

hash模式僅改變hash部分的內(nèi)容，而hash部分是不會(huì)包含在HTTP請(qǐng)求中的：

http://rdhub.cn/#/user/id // 如重新請(qǐng)求只會(huì)發(fā)送http://rdhub.cn/
故在hash模式下遇到根據(jù)URL請(qǐng)求頁(yè)面的情況不會(huì)有問題。

而history模式則會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣
http://rdhub.cn/user/id
在此情況下重新向后端發(fā)送請(qǐng)求，如后端沒有配置對(duì)應(yīng)/user/id的路由處理，則會(huì)返回404錯(cuò)誤。

官方推薦的解決辦法是在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。同時(shí)這么做以后，服務(wù)器就不再返回 404 錯(cuò)誤頁(yè)面，因?yàn)閷?duì)于所有路徑都會(huì)返回 index.html 文件。為了避免這種情況，在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個(gè) 404 頁(yè)面?；蛘?，如果是用 Node.js 作后臺(tái)，可以使用服務(wù)端的路由來匹配 URL，當(dāng)沒有匹配到路由的時(shí)候返回 404，從而實(shí)現(xiàn) fallback。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。