vue-router 學習

vue-router的粗淺學習

前言（胡言亂語）

做爲一個辣雞前端開發（我說我本身呢），仍是用vue技術棧的，不學一學路由知識，開發的時候頁面飛到哪兒去了你都不知道。

vue-router的三種模式

• history模式（HTML5History）
• hash模式（HashHistory）
• abstract模式（AbstractHistory）

一、history模式

利用支持h5 history屬性的瀏覽器特性，它表示當前窗口的歷史。

屬性

History.length // 當前窗口訪問過頁面的數量
History.state // 當前窗口歷史的棧頂數據

方法

History·back() // 後退一頁
History.forward() //前進一頁
HIstory.go(n: number) //前進（N>0）後退（n<0）n步

History.pushState(state, title, url) //歷史記錄中添加一條記錄
History.replaceState(state, title, url) // 替換當前記錄

state：一個與添加的記錄相關聯的狀態對象，主要用於popstate事件。該事件觸發時，該對象會傳入回調函數。也就是說，瀏覽器會將這個對象序列化之後保留在本地，從新載入這個頁面的時候，能夠拿到這個對象。若是不須要這個對象，此處能夠填null。
title：新頁面的標題。可是，如今全部瀏覽器都忽視這個參數，因此這裏能夠填空字符串。
url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

事件

History.popstate()
每當同一個文檔的瀏覽歷史（即history對象）出現變化時，就會觸發popstate事件。

注意，僅僅調用pushState()方法或replaceState()方法 ，並不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用 JavaScript 調用History.back()、History.forward()、History.go()方法時纔會觸發。另外，該事件只針對同一個文檔，若是瀏覽歷史的切換，致使加載不一樣的文檔，該事件也不會觸發。

使用的時候，能夠爲popstate事件指定回調函數。

window.onpopstate = function(event) { 
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
}
// 或者
window.addEventListener("popstate", function() {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
})
複製代碼

回調函數的參數是一個event事件對象，它的state屬性指向pushState和replaceState方法爲當前 URL 所提供的狀態對象（即這兩個方法的第一個參數）。上面代碼中的event.state，就是經過pushState和replaceState方法，爲當前 URL 綁定的state對象。

var currentState = history.state;

二、hash模式

原理是onhashchange事件，url都會被瀏覽器記錄下來，只能改變#後面的url片斷

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