參考文獻:https://blog.csdn.net/lla520/article/details/77894985/css
http://www.javashuo.com/article/p-xjxelpqv-dd.htmlhtml
https://blog.csdn.net/bujiongdan/article/details/81429927前端
先後端分離 ===> 利用Ajax,能夠在不刷新瀏覽器的狀況下異步數據請求交互。segmentfault
單頁應用(只有一個html文件,整個網站的全部內容都在這一個html裏,經過js來處理)不單單是在頁面交互是無刷新的,連頁面跳轉都是無刷新的。爲了實現單頁應用 ==> 先後端分離 + 前端路由。(更新視圖但不從新請求頁面)後端
前端路由實現起來其實也很簡單,就是匹配不一樣的 url 路徑,進行解析,加載不一樣的組件,而後動態的渲染出區域 html 內容。瀏覽器
#後面 hash 值的變化,並不會致使瀏覽器向服務器發出請求,瀏覽器不發出請求,也就不會刷新頁面。每次 hash 值的變化,會觸發hashchange
這個事件,經過這個事件咱們就能夠知道 hash 值發生了哪些變化。而後咱們即可以監聽hashchange
來實現更新頁面部份內容的操做:服務器
hash模式背後的原理是onhashchange
事件,能夠在window
對象上監聽這個事件:前後端分離
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
上面的代碼能夠經過改變hash來改變頁面字體顏色。異步
當你選擇mode類型以後,程序會根據你選擇的mode 類型建立不一樣的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發生變化的url都會被瀏覽器記錄(歷史訪問棧)下來,從而你會發現瀏覽器的前進後退均可以用了。這樣一來,儘管瀏覽器沒有請求服務器,可是頁面狀態和url一一關聯起來。
由於HTML5標準發佈,多了兩個 API,pushState()
和 replaceState()。
經過這兩個 API (1)能夠改變 url 地址且不會發送請求,(2)不只能夠讀取歷史記錄棧,還能夠對瀏覽器歷史記錄棧進行修改。
除此以外,還有popState().當瀏覽器跳轉到新的狀態時,將觸發popState事件.
包括了pushState
,replaceState
兩個方法,這兩個方法接收三個參數:stateObj,title,url
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
包括back
,forward
,go
三個方法,對應瀏覽器的前進forward,後退back,跳轉go操做。 有同窗說了,(谷歌)瀏覽器只有前進和後退,沒有跳轉,嗯,在前進後退上長按鼠標,會出來全部當前窗口的歷史記錄,從而能夠跳轉(也許叫跳更合適):
區別:
當用戶刷新頁面之類的操做時,瀏覽器會給服務器發送請求,因此這個實現須要服務器的支持,須要把全部路由都重定向到根頁面。
history模式怕啥
不怕前進,不怕後退,就怕刷新,(若是後端沒有準備的話),由於刷新是實實在在地去請求服務器的。
在history模式下,你能夠自由的修改path。history模式最終的路由都體如今url的pathname中,這部分是會傳到服務器端的,所以須要服務端對每個可能的path值都做相應的映射。
當刷新時,若是服務器中沒有相應的響應或者資源,會分分鐘刷出一個404來。
router掛在到根組件
new Vue({ router })
此時的router
會被掛載到 Vue 的根組件this.$options
選項中。在 option 上面存在 router 則表明是根組件。
$router與$route的區別
1. $route從當前router跳轉對象裏面能夠獲取name、path、query、params等(<router-link>傳的參數由 this.$route.query或者 this.$route.params 接收)
2. $router爲VueRouter實例。想要導航到不一樣URL,則使用$router.push方法;返回上一個history也是使用$router.go方法