国产精品国产主播在线观看,毛片一级完整版免费,亚洲爽

[轉帖]路由的兩種模式：hash模式和 history模式

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年5月30日 9:5 本文熱度 600

為什么要使用路由

現在的網絡應用程序越來越多的使用AJAX異步請求完成頁面的無縫刷新，導致瀏覽器的URL不會發生任何變化而完成了請求，從而破換了用戶瀏覽體驗。同時本次瀏覽的頁面內容在用戶下次使用URL訪問時將無法重新呈現，使用路由可以很好地解決這個問題。

單頁面應用利用了Javascript動態變換網頁內容，避免了頁面重載；路由則提供了瀏覽器地址變化，網頁內容也跟隨變化，兩者結合起來則為我們提供了體驗良好的單頁面web應用。

前端路由實現方式

路由需要實現三個功能：

當瀏覽器地址變化時，切換頁面；
點擊瀏覽器【后退】、【前進】按鈕，網頁內容跟隨變化；
刷新瀏覽器，網頁加載當前路由對應內容；

在單頁面web網頁中, 單純的瀏覽器地址改變, 網頁不會重載，如單純的hash網址改變網頁不會變化，因此我們的路由主要是通過監聽事件，并利用js實現動態改變網頁內容，有兩種實現方式：

hash模式：監聽瀏覽器地址hash值變化，執行相應的js切換網頁；
history模式：利用history API實現url地址改變，網頁內容改變；

它們的區別最明顯的就是hash會在瀏覽器地址后面增加#號，而history可以自定義地址。

hash模式

使用window.location.hash屬性及窗口的onhashchange事件，可以實現監聽瀏覽器地址hash值變化，執行相應的js切換網頁。下面具體介紹幾個使用過程中必須理解的要點：

hash指的是地址中#號以及后面的字符，也稱為散列值。hash也稱作錨點，本身是用來做頁面跳轉定位的。如http://localhost/index.html#abc，這里的#abc就是hash；
散列值是不會隨請求發送到服務器端的，所以改變hash，不會重新加載頁面；
監聽 window 的 hashchange 事件，當散列值改變時，可以通過 location.hash 來獲取和設置hash值；
location.hash值的變化會直接反應到瀏覽器地址欄；

觸發hashchange事件的幾種情況

瀏覽器地址欄散列值的變化（包括瀏覽器的前進、后退）會觸發window.location.hash值的變化，從而觸發onhashchange事件；

當瀏覽器地址欄中URL包含哈希如 www.baidu.com/#home，這時按下輸入，瀏覽器發送www.baidu.com/，請求至服務器，請求完畢之后設置散列值為#home，進而觸發onhashchange事件。

當只改變瀏覽器地址欄URL的哈希部分，這時按下回車，瀏覽器不會發送任何請求至服務器，這時發生的只是設置散列值新修改的哈希值，并觸發onhashchange事件；

html中<a>標簽的屬性 href 可以設置為頁面的元素ID如 #top，當點擊該鏈接時頁面跳轉至該id元素所在區域，同時瀏覽器自動設置 window.location.hash 屬性，地址欄中的哈希值也會發生改變，并觸發onhashchange事件；

//設置 url 的 hash，會在當前url后加上'#abc'
window.location.hash='abc';
let hash = window.location.hash //'#abc'

window.addEventListener('hashchange',function(){
    //監聽hash變化，點擊瀏覽器的前進后退會觸發
})

history模式

概述

window.history 屬性指向 History 對象，它表示當前窗口的瀏覽歷史。當發生改變時，只會改變頁面的路徑，不會刷新頁面。 History 對象保存了當前窗口訪問過的所有頁面網址。通過 history.length 可以得出當前窗口一共訪問過幾個網址。由于安全原因，瀏覽器不允許腳本讀取這些地址，但是允許在地址之間導航。瀏覽器工具欄的“前進”和“后退”按鈕，其實就是對 History 對象進行操作。

屬性

History 對象主要有兩個屬性。

History.length：當前窗口訪問過的網址數量（包括當前網頁）
History.state：History 堆棧最上層的狀態值（詳見下文）

// 當前窗口訪問過多少個網頁
history.length // 1

// History 對象的當前狀態
// 通常是 undefined，即未設置

history.state // undefined

方法

History.back()、History.forward()、History.go()，這三個方法用于在歷史之中移動。

History.back()：移動到上一個網址，等同于點擊瀏覽器的后退鍵。對于第一個訪問的網址，該方法無效果。
History.forward()：移動到下一個網址，等同于點擊瀏覽器的前進鍵。對于最后一個訪問的網址，該方法無效果。
History.go()：接受一個整數作為參數，以當前網址為基準，移動到參數指定的網址。如果參數超過實際存在的網址范圍，該方法無效果；如果不指定參數，默認參數為0，相當于刷新當前頁面。

history.back();
history.forward();
history.go(1);//相當于history.forward()
history.go(-1);//相當于history.back()
history.go(0); // 刷新當前頁面

注意：移動到以前訪問過的頁面時，頁面通常是從瀏覽器緩存之中加載，而不是重新要求服務器發送新的網頁。

History.pushState()

該方法用于在歷史中添加一條記錄。pushState()方法不會觸發頁面刷新，只是導致 History 對象發生變化，地址欄會有變化。

語法：history.pushState(object, title, url)

該方法接受三個參數，依次為：

object：是一個對象，通過 pushState 方法可以將該對象內容傳遞到新頁面中。如果不需要這個對象，此處可以填 null。
title：指標題，幾乎沒有瀏覽器支持該參數，傳一個空字符串比較安全。
url：新的網址，必須與當前頁面處在同一個域。不指定的話則為當前的路徑，如果設置了一個跨域網址，則會報錯。

var data = { foo: 'bar' };
history.pushState(data, '', '2.html');
console.log(history.state) // {foo: "bar"}

注意：如果 pushState 的 URL 參數設置了一個新的錨點值（即 hash），并不會觸發 hashchange 事件。反過來，如果 URL 的錨點值變了，則會在 History 對象創建一條瀏覽記錄。

如果 pushState() 方法設置了一個跨域網址，則會報錯。

// 報錯
// 當前網址為 http://example.com
history.pushState(null, '', 'https://twitter.com/hello');

上面代碼中，pushState 想要插入一個跨域的網址，導致報錯。這樣設計的目的是，防止惡意代碼讓用戶以為他們是在另一個網站上，因為這個方法不會導致頁面跳轉。

History.replaceState()

該方法用來修改 History 對象的當前記錄，用法與 pushState() 方法一樣。

假定當前網頁是 example.com/example.htm…

history.pushState({page: 1}, '', '?page=1')
// URL 顯示為 http://example.com/example.html?page=1

history.pushState({page: 2}, '', '?page=2');
// URL 顯示為 http://example.com/example.html?page=2

history.replaceState({page: 3}, '', '?page=3');
// URL 顯示為 http://example.com/example.html?page=3

history.back()
// URL 顯示為 http://example.com/example.html?page=1

history.back()
// URL 顯示為 http://example.com/example.html

history.go(2)
// URL 顯示為 http://example.com/example.html?page=3

popstate 事件

每當 history 對象出現變化時，就會觸發 popstate 事件。

注意：

僅僅調用pushState()方法或replaceState()方法，并不會觸發該事件;
只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用 Javascript 調用History.back()、 History.forward()、History.go()方法時才會觸發。
另外，該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發。
頁面第一次加載的時候，瀏覽器不會觸發popstate事件。

使用的時候，可以為popstate事件指定回調函數，回調函數的參數是一個 event 事件對象，它的 state 屬性指向當前的 state 對象。

window.addEventListener('popstate', function(e) {
    //e.state 相當于 history.state
    console.log('state: ' + JSON.stringify(e.state));
    console.log(history.state);
});

通過history.pushState 實現頁面 tab 切換的功能。

history 致命的缺點就是當改變頁面地址后，強制刷新瀏覽器時，（如果后端沒有做準備的話）會報錯，因為刷新是拿當前地址去請求服務器的，如果服務器中沒有相應的響應，會出現 404 頁面。

——————————————————

https://juejin.cn/post/7236563012533878821

該文章在 2023/5/30 9:08:08 編輯過

關鍵字查詢

路由

模式

history

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv