[轉(zhuǎn)帖]路由的兩種模式：hash模式和 history模式
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
為什么要使用路由現(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)三個功能：
在單頁面web網(wǎng)頁中, 單純的瀏覽器地址改變, 網(wǎng)頁不會重載，如單純的hash網(wǎng)址改變網(wǎng)頁不會變化，因此我們的路由主要是通過監(jiān)聽事件，并利用js實現(xiàn)動態(tài)改變網(wǎng)頁內(nèi)容，有兩種實現(xiàn)方式：
hash模式使用window.location.hash屬性及窗口的onhashchange事件，可以實現(xiàn)監(jiān)聽瀏覽器地址hash值變化，執(zhí)行相應的js切換網(wǎng)頁。下面具體介紹幾個使用過程中必須理解的要點：
觸發(fā)hashchange事件的幾種情況瀏覽器地址欄散列值的變化（包括瀏覽器的前進、后退）會觸發(fā) 當瀏覽器地址欄中URL包含哈希如 www.baidu.com/#home，這時按下輸入，瀏覽器發(fā)送www.baidu.com/，請求至服務器，請求完畢之后設置散列值為 當只改變?yōu)g覽器地址欄URL的哈希部分，這時按下回車，瀏覽器不會發(fā)送任何請求至服務器，這時發(fā)生的只是設置散列值新修改的哈希值，并觸發(fā)onhashchange事件； html中 //設置 url 的 hash，會在當前url后加上'#abc' window.location.hash='abc'; let hash = window.location.hash //'#abc' window.addEventListener('hashchange',function(){ //監(jiān)聽hash變化，點擊瀏覽器的前進后退會觸發(fā) }) history模式概述
屬性History 對象主要有兩個屬性。
// 當前窗口訪問過多少個網(wǎng)頁 history.length // 1 // History 對象的當前狀態(tài) // 通常是 undefined，即未設置 history.state // undefined 方法
history.back(); history.forward(); history.go(1);//相當于history.forward() history.go(-1);//相當于history.back() history.go(0); // 刷新當前頁面 注意：移動到以前訪問過的頁面時，頁面通常是從瀏覽器緩存之中加載，而不是重新要求服務器發(fā)送新的網(wǎng)頁。 History.pushState()該方法用于在歷史中添加一條記錄。 語法： 該方法接受三個參數(shù)，依次為：
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 事件。 注意：
使用的時候，可以為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)文章
正在查詢... 
|
400 186 1886
