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

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

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

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

前端路由實(shí)現(xiàn)起來其實(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ì)刷新頁面。每次 hash 值的變化，會(huì)觸發(fā)hashchange 這個(gè)事件，通過這個(gè)事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽hashchange來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作：

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

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

上面的代碼可以通過改變hash來改變頁面字體顏色。

當(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()將新路由添加到瀏覽器訪問歷史的棧頂 和 HashHistory.replace()替換掉當(dāng)前棧頂?shù)穆酚?/span>

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

history模式

因?yàn)镠TML5標(biāo)準(zhǔn)發(fā)布，多了兩個(gè) API，pushState() 和 replaceState()。通過這兩個(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é)說了，(谷歌)瀏覽器只有前進(jìn)和后退，沒有跳轉(zhuǎn)，嗯，在前進(jìn)后退上長按鼠標(biāo)，會(huì)出來所有當(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一樣,如后端沒有配置對(duì)應(yīng)/user/id的路由處理，則會(huì)返回404錯(cuò)誤

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

history模式怕啥
不怕前進(jìn)，不怕后退，就怕刷新，（如果后端沒有準(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ù)器中沒有相應(yīng)的響應(yīng)或者資源，會(huì)分分鐘刷出一個(gè)404來。

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方法

【