vue-router路由模式詳解

時間 2020-05-07

原文原文鏈接

1、路由模式解析

　　要講vue-router的路由模式，首先要了解的一點就是路由是由多個URL組成的，使用不一樣的URL能夠相應的導航到不一樣的位置。javascript

　　若是有進行過服務器開發或者對http協議有所瞭解就會知道，瀏覽器中對頁面的訪問是無狀態的，因此咱們在切換不一樣的頁面時都會從新進行請求。而實際使用vue和vue-router開發就會明白，在切換頁面時是沒有從新進行請求的，使用起來就好像頁面是有狀態的，這是什麼緣由呢。html

　　這實際上是藉助了瀏覽器的History API來實現的，這樣可使得頁面跳轉而不刷新，頁面的狀態就被維持在瀏覽器中了。前端

　　vue-router中默認使用的是hash模式，也就是會出現以下的URL：，URL中帶有#號vue

　　咱們能夠用以下代碼修改爲history模式：java

import Vue from 'vue' import Router from 'vue-router' import Main from '@/components/Main' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', component: Main } ] })

　　這樣子URL中的#號就被去除了。vue-router

　　實際上存在三種模式：後端

　　Hash: 使用URL的hash值來做爲路由。支持全部瀏覽器。api

　　History: 以來HTML5 History API 和服務器配置。參考官網中HTML5 History模式瀏覽器

　　Abstract：支持全部javascript運行模式。若是發現沒有瀏覽器的API，路由會自動強制進入這個模式。服務器

2、兩種模式的區別

一、hash模式

　　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來改變頁面字體顏色，雖然沒什麼用，可是必定程度上說明了原理。

　　更關鍵的一點是，由於hash發生變化的url都會被瀏覽器記錄下來，從而你會發現瀏覽器的前進後退均可以用了，同時點擊後退時，頁面字體顏色也會發生變化。這樣一來，儘管瀏覽器沒有請求服務器，可是頁面狀態和url一一關聯起來，後來人們給它起了一個霸氣的名字叫前端路由，成爲了單頁應用標配。

　　咱們寫個簡單的方法來測試一下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>測試一下</div> <script type="text/javascript"> window.onhashchange = function(event){ console.log(event.oldURL,event.newURL) let hash = location.hash.slice(1); document.body.style.color = hash; } </script> </body> </html>

　　而且經過瀏覽器的前進、後退頁面都可以變化。

　　網易雲音樂，百度網盤就採用了hash路由，看起來就是這個樣子:

http://music.163.com/#/friend https://pan.baidu.com/disk/home#list/vmode=list

二、history路由

　　隨着history api的到來，前端路由開始進化了，前面的hashchange，你只能改變#後面的url片斷，而history api則給了前端徹底的自由

　　history api能夠分爲兩大部分：切換和修改

（1）切換歷史狀態

　　包括back、forward、go三個方法，對應瀏覽器的前進，後退，跳轉操做，有同窗說了，(谷歌)瀏覽器只有前進和後退，沒有跳轉，嗯，在前進後退上長按鼠標，會出來全部當前窗口的歷史記錄，從而能夠跳轉(也許叫跳更合適)：

history.go(-2);//後退兩次 history.go(2);//前進兩次 history.back(); //後退 hsitory.forward(); //前進

（2）修改歷史狀態

　　包括了pushState、replaceState兩個方法，這兩個方法接收三個參數：stateObj，title，url

history.pushState({color:'red'}, 'red', 'red') window.onpopstate = function(event){ console.log(event.state) if(event.state && event.state.color === 'red'){ document.body.style.color = 'red'; } } history.back(); history.forward();

　　經過pushstate把頁面的狀態保存在state對象中，當頁面的url再變回這個url時，能夠經過event.state取到這個state對象，從而能夠對頁面狀態進行還原，這裏的頁面狀態就是頁面字體顏色，其實滾動條的位置，閱讀進度，組件的開關的這些頁面狀態均可以存儲到state的裏面。

　　經過history api，咱們丟掉了醜陋的#，可是它也有個毛病：

　　不怕前進，不怕後退，就怕刷新，f5，（若是後端沒有準備的話），由於刷新是實實在在地去請求服務器的。

　　在hash模式下，前端路由修改的是#中的信息，而瀏覽器請求時是不帶它玩的，因此沒有問題。可是在history下，你能夠自由的修改path，當刷新時，若是服務器中沒有相應的響應或者資源，會分分鐘刷出一個404來。

（3）popstate實現history路由攔截，監聽頁面返回事件

　　當活動歷史記錄條目更改時，將觸發popstate事件。

　　一、若是被激活的歷史記錄條目是經過對 history.pushState() 的調用建立的，或者受到對 history.replaceState() 的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。

　　二、須要注意的是調用 history.pushState() 或 history.replaceState() 用來在瀏覽歷史中添加或修改記錄，不會觸發popstate事件；

　　只有在作出瀏覽器動做時，纔會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）

　　咱們測試一下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>測試一下</div> <script type="text/javascript"> if (window.history && window.history.pushState) { window.onpopstate = function(event) { console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); //window.history.go(1) //window.history.back()  }; //window.addEventListener("popstate", function(e) { // window.location = 'http://www.baidu.com'; //}, false); !function() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }(); } </script> </body> </html>