資訊專欄INFORMATION COLUMN
摘要：整個路由的核心連接點是的值，監(jiān)聽器負責監(jiān)聽值的變化。當值發(fā)生改變的時候，去路由表中去查詢，將與當前匹配的頁面作為路由出口的內(nèi)容。去路由表中查找與對應(yīng)的頁面，將這種頁面替代原來的路由出口內(nèi)容。
設(shè)計思路
路由跳轉(zhuǎn)最常見的形式是通過a標簽，當a標簽被點擊的時候，將a標簽中對應(yīng)的路徑值賦值給hash。
整個路由的核心連接點是hash的值，hash監(jiān)聽器負責監(jiān)聽hash值的變化。
當hash值發(fā)生改變的時候，去路由表中去查詢，將與當前hash匹配的html頁面作為路由出口的內(nèi)容。
首先看html代碼
操作系統(tǒng) 計算機網(wǎng)絡(luò) 軟件工程
這里的content就是路由出口，當點擊不同的a標簽時，content內(nèi)部展示的內(nèi)容也不同。
其次看a標簽上綁定的事件
const links = document.querySelectorAll("a");
links.forEach(function (link) {
link.addEventListener("click", function (ev) {
ev.preventDefault();
const href = this.getAttribute("href");
window.location.hash = href;
});
});
當a標簽被點擊時，禁止a標簽的默認行為。然后將a標簽的href的值賦給window.location.hash。
可以看到此時瀏覽器的地址欄發(fā)生更新。
如果到此為止，那么頁面不會發(fā)生更新，僅僅只是location的hash的值發(fā)生改變。
最后當hash發(fā)生改變時，頁面也該更新。去路由表中查找與hash對應(yīng)的頁面，
將這種頁面替代原來的路由出口內(nèi)容。
window.addEventListener("hashchange", function () {
const outer = document.querySelector("#content");
const hash = window.location.hash;
const route = routes.find(function (route) {
return hash === "#" + route.path;
});
outer.innerHTML = route && route.component || "Error
";
});
完整的代碼可以從我的github 獲取完整代碼，覺得可以的話，可以點個贊。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110309.html
摘要：獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項目地址 https:...
摘要：體驗優(yōu)先的單頁框架點此查看倉庫是專為單頁應(yīng)用而設(shè)計的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具，但必須掌握和的基礎(chǔ)知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優(yōu)先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要：體驗優(yōu)先的單頁框架點此查看倉庫是專為單頁應(yīng)用而設(shè)計的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具，但必須掌握和的基礎(chǔ)知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優(yōu)先的JavaScript單頁框架 Amaple (點此查看Github倉...
閱讀 3920·2021-11-24 10:46
閱讀 1816·2021-11-16 11:44
閱讀 2289·2021-09-22 16:02
閱讀 1401·2019-08-30 15:55
閱讀 1131·2019-08-30 12:46
閱讀 565·2019-08-28 18:31
閱讀 2762·2019-08-26 18:38
閱讀 1093·2019-08-23 16:51
