History路由機制

本文轉載自查看原文 2017-06-22 08:26 2033

用戶訪問網頁的歷史記錄通常會被保存在一個類似於棧對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。它提供了一些方法來操作頁面的前進和后退：

window.history.back() 返回到上一個頁面
window.history.forward() 進入到下一個頁面
window.history.go([delta]) 跳轉到指定頁面

HTML5 對History Api 進行了增強，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate

pushState是往history對象里添加一個新的歷史記錄，即壓棧。

replaceState 是替換history對象中的當前歷史。

當點擊瀏覽器后退按鈕或js調用history.back都會觸發onpopstate事件, 與其類似的還有一個事件: onhashchange 。

onhashchange是老API, 瀏覽器支持度高, 本來是用來監聽hash變化的, 但可以被利用來做客戶端前進和后退事件的監聽，onpopstate是專門用來監聽瀏覽器前進后退的, 不僅可以支持hash, 非hash的同源url也支持。

如下：

一、onhashchange 事件在當前 URL 的錨部分(以 '#' 號為開始) 發生改變時觸發。

錨部分的實例：指定當前 URL 為
http://www.example.com/test.htm#part2 - 這個 URL 中的錨部分為 #part2。

你可以使用以下方式調用事件:

1、通過設置Location 對象的 location.hash 或 location.href 屬性修改錨部分。

2、使用不同書簽導航到當前頁面（使用"后退" 或"前進"按鈕）

3、點擊鏈接跳轉到書簽錨

demo:

<!DOCTYPE html>

<html>

<head>

<title>菜鳥教程(runoob.com)</title>

</head>

<body>

<p>該實例演示了如何使用 addEventListener()方法向 body 元素中添加 "onhashchange" 事件。</p>

<p>點擊按鈕修改當前 URL 的錨部分為 #part5</p>

// 使用 location.hash 屬性來修改錨部分

function changePart() {

location.hash = "part5";

var x = "錨部分現在為: " + location.hash;

document.getElementById("demo").innerHTML = x;

}

window.addEventListener("hashchange", myFunction);

function myFunction() {

alert("錨部分已修改！");

}

</script>

</body>

</html>

二、window.onpopstate是popstate事件在window對象上的事件處理程序.

每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發. 如果當前處於激活狀態的歷史記錄條目是由history.pushState()方法創建,或者由history.replaceState()方法修改過的, 則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝.

調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在瀏覽器某些行為下觸發, 比如點擊后退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法).

當網頁加載時,各瀏覽器對popstate事件是否觸發有不同的表現,Chrome 和 Safari會觸發popstate事件, 而Firefox不會.

語法：window.onpopstate = funcRef; funcRef 是個函數名.

demo:

假如當前網頁地址為http://example.com/example.html,則運行下述代碼后

window.onpopstate = function(event) {

alert("location: " + document.location + ", state: " + JSON.stringify(event.state));

};

//綁定事件處理函數.

history.pushState({page: 1}, "title 1", "?page=1"); //添加並激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引為1

history.pushState({page: 2}, "title 2", "?page=2"); //添加並激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引為2

history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目 http://ex..?page=2 變為 http://ex..?page=3,條目索引為3

//history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"

//history.back(); // 彈出 "location: http://example.com/example.html, state: null

//history.go(2); // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}

即便進入了那些非pushState和replaceState方法作用過的(比如http://example.com/example.html)沒有state對象關聯的那些網頁, popstate事件也仍然會被觸發.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 hash路由和history路由的區別 hash和history路由的區別 Vue路由配置history模式 vue-router的路由守衛，hash路由和history路由前端路由原理之 hash 模式和 history 模式 vue-cli3 路由history設置 Vue路由History模式分析單頁面路由的history模式后端配置 history路由模式下的nginx配置 Vue路由的hash模式和history模式