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