[轉(zhuǎn)帖]路由的兩種模式：hash模式和 history模式
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
為什么要使用路由現(xiàn)在的網(wǎng)絡(luò)應(yīng)用程序越來越多的使用AJAX異步請求完成頁面的無縫刷新，導(dǎo)致瀏覽器的URL不會發(fā)生任何變化而完成了請求，從而破換了用戶瀏覽體驗(yàn)。同時本次瀏覽的頁面內(nèi)容在用戶下次使用URL訪問時將無法重新呈現(xiàn)，使用路由可以很好地解決這個問題。 單頁面應(yīng)用利用了Javascript動態(tài)變換網(wǎng)頁內(nèi)容，避免了頁面重載；路由則提供了瀏覽器地址變化，網(wǎng)頁內(nèi)容也跟隨變化，兩者結(jié)合起來則為我們提供了體驗(yàn)良好的單頁面web應(yīng)用。 前端路由實(shí)現(xiàn)方式路由需要實(shí)現(xiàn)三個功能：
在單頁面web網(wǎng)頁中, 單純的瀏覽器地址改變, 網(wǎng)頁不會重載，如單純的hash網(wǎng)址改變網(wǎng)頁不會變化，因此我們的路由主要是通過監(jiān)聽事件，并利用js實(shí)現(xiàn)動態(tài)改變網(wǎng)頁內(nèi)容，有兩種實(shí)現(xiàn)方式：
hash模式使用window.location.hash屬性及窗口的onhashchange事件，可以實(shí)現(xiàn)監(jiān)聽瀏覽器地址hash值變化，執(zhí)行相應(yīng)的js切換網(wǎng)頁。下面具體介紹幾個使用過程中必須理解的要點(diǎn)：
觸發(fā)hashchange事件的幾種情況瀏覽器地址欄散列值的變化（包括瀏覽器的前進(jìn)、后退）會觸發(fā) 當(dāng)瀏覽器地址欄中URL包含哈希如 www.baidu.com/#home，這時按下輸入，瀏覽器發(fā)送www.baidu.com/，請求至服務(wù)器，請求完畢之后設(shè)置散列值為 當(dāng)只改變?yōu)g覽器地址欄URL的哈希部分，這時按下回車，瀏覽器不會發(fā)送任何請求至服務(wù)器，這時發(fā)生的只是設(shè)置散列值新修改的哈希值，并觸發(fā)onhashchange事件； html中 //設(shè)置 url 的 hash，會在當(dāng)前url后加上'#abc' window.location.hash='abc'; let hash = window.location.hash //'#abc' window.addEventListener('hashchange',function(){ //監(jiān)聽hash變化，點(diǎn)擊瀏覽器的前進(jìn)后退會觸發(fā) }) history模式概述
屬性History 對象主要有兩個屬性。
// 當(dāng)前窗口訪問過多少個網(wǎng)頁 history.length // 1 // History 對象的當(dāng)前狀態(tài) // 通常是 undefined，即未設(shè)置 history.state // undefined 方法
history.back(); history.forward(); history.go(1);//相當(dāng)于history.forward() history.go(-1);//相當(dāng)于history.back() history.go(0); // 刷新當(dāng)前頁面 注意：移動到以前訪問過的頁面時，頁面通常是從瀏覽器緩存之中加載，而不是重新要求服務(wù)器發(fā)送新的網(wǎng)頁。 History.pushState()該方法用于在歷史中添加一條記錄。 語法： 該方法接受三個參數(shù)，依次為：
var data = { foo: 'bar' }; history.pushState(data, '', '2.html'); console.log(history.state) // {foo: "bar"} 注意：如果 pushState 的 URL 參數(shù)設(shè)置了一個新的錨點(diǎn)值（即 hash），并不會觸發(fā) hashchange 事件。反過來，如果 URL 的錨點(diǎn)值變了，則會在 History 對象創(chuàng)建一條瀏覽記錄。 如果 pushState() 方法設(shè)置了一個跨域網(wǎng)址，則會報(bào)錯。 // 報(bào)錯 // 當(dāng)前網(wǎng)址為 http://example.com history.pushState(null, '', 'https://twitter.com/hello'); 上面代碼中，pushState 想要插入一個跨域的網(wǎng)址，導(dǎo)致報(bào)錯。這樣設(shè)計(jì)的目的是，防止惡意代碼讓用戶以為他們是在另一個網(wǎng)站上，因?yàn)檫@個方法不會導(dǎo)致頁面跳轉(zhuǎn)。 History.replaceState()該方法用來修改 History 對象的當(dāng)前記錄，用法與 pushState() 方法一樣。 假定當(dāng)前網(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 事件每當(dāng) history 對象出現(xiàn)變化時，就會觸發(fā) popstate 事件。 注意：
使用的時候，可以為popstate事件指定回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)是一個 event 事件對象，它的 state 屬性指向當(dāng)前的 state 對象。 window.addEventListener('popstate', function(e) { //e.state 相當(dāng)于 history.state console.log('state: ' + JSON.stringify(e.state)); console.log(history.state); }); 通過history.pushState 實(shí)現(xiàn)頁面 tab 切換的功能。 history 致命的缺點(diǎn)就是當(dāng)改變頁面地址后，強(qiáng)制刷新瀏覽器時，（如果后端沒有做準(zhǔn)備的話）會報(bào)錯，因?yàn)樗⑿率悄卯?dāng)前地址去請求服務(wù)器的，如果服務(wù)器中沒有相應(yīng)的響應(yīng)，會出現(xiàn) 404 頁面。 —————————————————— https://juejin.cn/post/7236563012533878821 該文章在 2023/5/30 9:08:08 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
