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

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

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

單頁應用（只有一個html文件，整個網站的所有內容都在這一個html里，通過js來處理）不僅僅是在頁面交互是無刷新的，連頁面跳轉都是無刷新的。為了實現單頁應用 ==> 前后端分離 + 前端路由。（更新視圖但不重新請求頁面）

前端路由實現起來其實也很簡單，就是匹配不同的 url 路徑，進行解析，加載不同的組件，然后動態(tài)的渲染出區(qū)域 html 內容。

hash模式

#后面 hash 值的變化，并不會導致瀏覽器向服務器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。每次 hash 值的變化，會觸發(fā)hashchange 這個事件，通過這個事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽hashchange來實現更新頁面部分內容的操作：

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

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

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

當你選擇mode類型之后，程序會根據你選擇的mode 類型創(chuàng)建不同的history對象(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有兩個方法：HashHistory.push()將新路由添加到瀏覽器訪問歷史的棧頂 和 HashHistory.replace()替換掉當前棧頂的路由

因為hash發(fā)生變化的url都會被瀏覽器記錄（歷史訪問棧）下來，從而你會發(fā)現瀏覽器的前進后退都可以用了。這樣一來，盡管瀏覽器沒有請求服務器，但是頁面狀態(tài)和url一一關聯起來。

history模式

因為HTML5標準發(fā)布，多了兩個 API，pushState() 和 replaceState()。通過這兩個 API （1）可以改變 url 地址且不會發(fā)送請求，（2）不僅可以讀取歷史記錄棧，還可以對瀏覽器歷史記錄棧進行修改。

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

修改歷史狀態(tài)

包括了pushState,replaceState兩個方法,這兩個方法接收三個參數:stateObj,title,url

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

切換歷史狀態(tài)

包括back,forward,go三個方法，對應瀏覽器的前進forward，后退back，跳轉go操作。 有同學說了，(谷歌)瀏覽器只有前進和后退，沒有跳轉，嗯，在前進后退上長按鼠標，會出來所有當前窗口的歷史記錄，從而可以跳轉(也許叫跳更合適)：

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

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

• history.back(); //后退

• hsitory.forward(); //前進

區(qū)別：

• 前面的hashchange，你只能改變#后面的url片段。而pushState設置的新URL可以是與當前URL同源的任意URL。
• history模式則會將URL修改得就和正常請求后端的URL一樣,如后端沒有配置對應/user/id的路由處理，則會返回404錯誤

當用戶刷新頁面之類的操作時，瀏覽器會給服務器發(fā)送請求，所以這個實現需要服務器的支持，需要把所有路由都重定向到根頁面。

history模式怕啥
不怕前進，不怕后退，就怕刷新，（如果后端沒有準備的話）,因為刷新是實實在在地去請求服務器的。

在history模式下，你可以自由的修改path。history模式最終的路由都體現在url的pathname中，這部分是會傳到服務器端的，因此需要服務端對每一個可能的path值都作相應的映射。

當刷新時，如果服務器中沒有相應的響應或者資源，會分分鐘刷出一個404來。

router掛在到根組件

new Vue({   router })

此時的router會被掛載到 Vue 的根組件this.$options選項中。在 option 上面存在 router 則代表是根組件。

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

1. $route從當前router跳轉對象里面可以獲取name、path、query、params等（<router-link>傳的參數由 this.$route.query或者 this.$route.params 接收）

2. $router為VueRouter實例。想要導航到不同URL，則使用$router.push方法；返回上一個history也是使用$router.go方法

【