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

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

[轉(zhuǎn)帖]路由的兩種模式:hash模式和 history模式

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


為什么要使用路由

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

單頁面應用利用了Javascript動態(tài)變換網(wǎng)頁內(nèi)容,避免了頁面重載;路由則提供了瀏覽器地址變化,網(wǎng)頁內(nèi)容也跟隨變化,兩者結(jié)合起來則為我們提供了體驗良好的單頁面web應用。

前端路由實現(xiàn)方式

路由需要實現(xiàn)三個功能:

  1. 當瀏覽器地址變化時,切換頁面;

  2. 點擊瀏覽器【后退】、【前進】按鈕,網(wǎng)頁內(nèi)容跟隨變化;

  3. 刷新瀏覽器,網(wǎng)頁加載當前路由對應內(nèi)容;

在單頁面web網(wǎng)頁中, 單純的瀏覽器地址改變, 網(wǎng)頁不會重載,如單純的hash網(wǎng)址改變網(wǎng)頁不會變化,因此我們的路由主要是通過監(jiān)聽事件,并利用js實現(xiàn)動態(tài)改變網(wǎng)頁內(nèi)容,有兩種實現(xiàn)方式:

  1. hash模式:監(jiān)聽瀏覽器地址hash值變化,執(zhí)行相應的js切換網(wǎng)頁;

  2. history模式:利用history API實現(xiàn)url地址改變,網(wǎng)頁內(nèi)容改變;

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

hash模式

使用window.location.hash屬性及窗口的onhashchange事件,可以實現(xiàn)監(jiān)聽瀏覽器地址hash值變化,執(zhí)行相應的js切換網(wǎng)頁。下面具體介紹幾個使用過程中必須理解的要點:

  • hash指的是地址中#號以及后面的字符,也稱為散列值。hash也稱作錨點,本身是用來做頁面跳轉(zhuǎn)定位的。如http://localhost/index.html#abc,這里的#abc就是hash;

  • 散列值是不會隨請求發(fā)送到服務器端的,所以改變hash,不會重新加載頁面;

  • 監(jiān)聽 window 的 hashchange 事件,當散列值改變時,可以通過 location.hash 來獲取和設置hash值;

  • location.hash值的變化會直接反應到瀏覽器地址欄;

觸發(fā)hashchange事件的幾種情況

瀏覽器地址欄散列值的變化(包括瀏覽器的前進、后退)會觸發(fā)window.location.hash值的變化,從而觸發(fā)onhashchange事件;

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

當只改變?yōu)g覽器地址欄URL的哈希部分,這時按下回車,瀏覽器不會發(fā)送任何請求至服務器,這時發(fā)生的只是設置散列值新修改的哈希值,并觸發(fā)onhashchange事件;

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

//設置 url 的 hash,會在當前url后加上'#abc'

window.location.hash='abc';

let hash = window.location.hash //'#abc'


window.addEventListener('hashchange',function(){

    //監(jiān)聽hash變化,點擊瀏覽器的前進后退會觸發(fā)

})

history模式

概述

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

屬性

History 對象主要有兩個屬性。

  • History.length:當前窗口訪問過的網(wǎng)址數(shù)量(包括當前網(wǎng)頁)

  • History.state:History 堆棧最上層的狀態(tài)值(詳見下文)

// 當前窗口訪問過多少個網(wǎng)頁

history.length // 1


// History 對象的當前狀態(tài)

// 通常是 undefined,即未設置


history.state // undefined

方法

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

  • History.back():移動到上一個網(wǎng)址,等同于點擊瀏覽器的后退鍵。對于第一個訪問的網(wǎng)址,該方法無效果。

  • History.forward():移動到下一個網(wǎng)址,等同于點擊瀏覽器的前進鍵。對于最后一個訪問的網(wǎng)址,該方法無效果。

  • History.go():接受一個整數(shù)作為參數(shù),以當前網(wǎng)址為基準,移動到參數(shù)指定的網(wǎng)址。如果參數(shù)超過實際存在的網(wǎng)址范圍,該方法無效果;如果不指定參數(shù),默認參數(shù)為0,相當于刷新當前頁面。

history.back();

history.forward();

history.go(1);//相當于history.forward()

history.go(-1);//相當于history.back()

history.go(0); // 刷新當前頁面

注意:移動到以前訪問過的頁面時,頁面通常是從瀏覽器緩存之中加載,而不是重新要求服務器發(fā)送新的網(wǎng)頁。

History.pushState()

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

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

該方法接受三個參數(shù),依次為:

  • object:是一個對象,通過 pushState 方法可以將該對象內(nèi)容傳遞到新頁面中。如果不需要這個對象,此處可以填 null。

  • title:指標題,幾乎沒有瀏覽器支持該參數(shù),傳一個空字符串比較安全。

  • url:新的網(wǎng)址,必須與當前頁面處在同一個域。不指定的話則為當前的路徑,如果設置了一個跨域網(wǎng)址,則會報錯。

var data = { foo: 'bar' };

history.pushState(data, '', '2.html');

console.log(history.state) // {foo: "bar"}

注意:如果 pushState 的 URL 參數(shù)設置了一個新的錨點值(即 hash),并不會觸發(fā) hashchange 事件。反過來,如果 URL 的錨點值變了,則會在 History 對象創(chuàng)建一條瀏覽記錄。

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

// 報錯

// 當前網(wǎng)址為 http://example.com

history.pushState(null, '', 'https://twitter.com/hello');

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

History.replaceState()

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

假定當前網(wǎng)頁是 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 對象出現(xiàn)變化時,就會觸發(fā) popstate 事件。

注意:

  • 僅僅調(diào)用pushState()方法或replaceState()方法 ,并不會觸發(fā)該事件;

  • 只有用戶點擊瀏覽器倒退按鈕和前進按鈕,或者使用 Javascript 調(diào)用History.back()、 History.forward()、History.go()方法時才會觸發(fā)。

  • 另外,該事件只針對同一個文檔,如果瀏覽歷史的切換,導致加載不同的文檔,該事件也不會觸發(fā)。

  • 頁面第一次加載的時候,瀏覽器不會觸發(fā)popstate事件。

使用的時候,可以為popstate事件指定回調(diào)函數(shù),回調(diào)函數(shù)的參數(shù)是一個 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 實現(xiàn)頁面 tab 切換的功能。

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


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

https://juejin.cn/post/7236563012533878821



該文章在 2023/5/30 9:08:08 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務費用、相關(guān)報表等業(yè)務管理,結(jié)合碼頭的業(yè)務特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved