vue路由的兩種模式怎么實(shí)現(xiàn)

這篇文章主要介紹“vue路由的兩種模式怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在vue路由的兩種模式怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue路由的兩種模式怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

vue路由的兩種模式：1、hash模式，其原理是onhashchange事件，可以在window對(duì)象上監(jiān)聽(tīng)這個(gè)事件；2、history模式，可利用“history.pushState”的API來(lái)完成URL跳轉(zhuǎn)。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

前后端分離 ===> 利用Ajax，可以在不刷新瀏覽器的情況下異步數(shù)據(jù)請(qǐng)求交互。

單頁(yè)應(yīng)用（只有一個(gè)html文件，整個(gè)網(wǎng)站的所有內(nèi)容都在這一個(gè)html里，通過(guò)js來(lái)處理）不僅僅是在頁(yè)面交互是無(wú)刷新的，連頁(yè)面跳轉(zhuǎn)都是無(wú)刷新的。為了實(shí)現(xiàn)單頁(yè)應(yīng)用 ==> 前后端分離 + 前端路由。（更新視圖但不重新請(qǐng)求頁(yè)面）

前端路由實(shí)現(xiàn)起來(lái)其實(shí)也很簡(jiǎn)單，就是匹配不同的 url 路徑，進(jìn)行解析，加載不同的組件，然后動(dòng)態(tài)的渲染出區(qū)域 html 內(nèi)容。

hash模式

#后面 hash 值的變化，并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，瀏覽器不發(fā)出請(qǐng)求，也就不會(huì)刷新頁(yè)面。每次 hash 值的變化，會(huì)觸發(fā)hashchange 這個(gè)事件，通過(guò)這個(gè)事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽(tīng)hashchange來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作：

hash模式背后的原理是onhashchange事件，可以在window對(duì)象上監(jiān)聽(tīng)這個(gè)事件:

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

上面的代碼可以通過(guò)改變hash來(lái)改變頁(yè)面字體顏色。

當(dāng)你選擇mode類型之后，程序會(huì)根據(jù)你選擇的mode 類型創(chuàng)建不同的history對(duì)象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

HashHistory有兩個(gè)方法：HashHistory.push()將新路由添加到瀏覽器訪問(wèn)歷史的棧頂 和 HashHistory.replace()替換掉當(dāng)前棧頂?shù)穆酚?/span>

因?yàn)閔ash發(fā)生變化的url都會(huì)被瀏覽器記錄（歷史訪問(wèn)棧）下來(lái)，從而你會(huì)發(fā)現(xiàn)瀏覽器的前進(jìn)后退都可以用了。這樣一來(lái)，盡管瀏覽器沒(méi)有請(qǐng)求服務(wù)器，但是頁(yè)面狀態(tài)和url一一關(guān)聯(lián)起來(lái)。

history模式

因?yàn)镠TML5標(biāo)準(zhǔn)發(fā)布，多了兩個(gè) API，pushState() 和 replaceState()。通過(guò)這兩個(gè) API （1）可以改變 url 地址且不會(huì)發(fā)送請(qǐng)求，（2）不僅可以讀取歷史記錄棧，還可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改。

除此之外，還有popState().當(dāng)瀏覽器跳轉(zhuǎn)到新的狀態(tài)時(shí)，將觸發(fā)popState事件.

修改歷史狀態(tài)

包括了pushState,replaceState兩個(gè)方法,這兩個(gè)方法接收三個(gè)參數(shù):stateObj,title,url

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

切換歷史狀態(tài)

包括back,forward,go三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)forward，后退back，跳轉(zhuǎn)go操作。   有同學(xué)說(shuō)了，(谷歌)瀏覽器只有前進(jìn)和后退，沒(méi)有跳轉(zhuǎn)，嗯，在前進(jìn)后退上長(zhǎng)按鼠標(biāo)，會(huì)出來(lái)所有當(dāng)前窗口的歷史記錄，從而可以跳轉(zhuǎn)(也許叫跳更合適)：

• history.go(-2);//后退兩次

• history.go(2);//前進(jìn)兩次

• history.back(); //后退

• hsitory.forward(); //前進(jìn)

區(qū)別：

• 前面的hashchange，你只能改變#后面的url片段。而pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL。

• history模式則會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣,如后端沒(méi)有配置對(duì)應(yīng)/user/id的路由處理，則會(huì)返回404錯(cuò)誤

當(dāng)用戶刷新頁(yè)面之類的操作時(shí)，瀏覽器會(huì)給服務(wù)器發(fā)送請(qǐng)求，所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持，需要把所有路由都重定向到根頁(yè)面。

history模式怕啥
不怕前進(jìn)，不怕后退，就怕刷新，（如果后端沒(méi)有準(zhǔn)備的話）,因?yàn)樗⑿率菍?shí)實(shí)在在地去請(qǐng)求服務(wù)器的。

在history模式下，你可以自由的修改path。history模式最終的路由都體現(xiàn)在url的pathname中，這部分是會(huì)傳到服務(wù)器端的，因此需要服務(wù)端對(duì)每一個(gè)可能的path值都作相應(yīng)的映射。

當(dāng)刷新時(shí)，如果服務(wù)器中沒(méi)有相應(yīng)的響應(yīng)或者資源，會(huì)分分鐘刷出一個(gè)404來(lái)。

router掛在到根組件

new Vue({
  router
})

此時(shí)的router會(huì)被掛載到 Vue 的根組件this.$options選項(xiàng)中。在 option 上面存在 router 則代表是根組件。

$router與$route的區(qū)別

1. $route從當(dāng)前router跳轉(zhuǎn)對(duì)象里面可以獲取name、path、query、params等（<router-link>傳的參數(shù)由 this.$route.query或者 this.$route.params 接收）

2. $router為VueRouter實(shí)例。想要導(dǎo)航到不同URL，則使用$router.push方法；返回上一個(gè)history也是使用$router.go方法

到此，關(guān)于“vue路由的兩種模式怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！