溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用原生js代碼實現前端簡易路由”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用原生js代碼實現前端簡易路由”吧！
路由（routing）就是通過互聯的網絡把信息從源地址傳輸到目的地址的活動。路由發生在OSI網絡參考模型中的第三層即網絡層
通俗點來講,路由就是把一個url 發送到后端服務器上,然后獲取對應的后端資源
// html部分
<body>
<a href="#1" rel="external nofollow" >go to 1</a>
<a href="#2" rel="external nofollow" >go to 2</a>
<a href="#3" rel="external nofollow" >go to 3</a>
<a href="#4" rel="external nofollow" >go to 4</a>
<div id="app"></div>
<div id="div404" >你要找的內容被狗吃了</div>
<script src="index.js"></script>
</body>
// js
const app = document.getElementById('app')
const div1 = document.createElement('div')
div1.innerHTML = '1.components'
const div2 = document.createElement('div')
div2.innerHTML = '2.components'
const div3 = document.createElement('div')
div3.innerHTML = '3.components'
const div4 = document.createElement('div')
div4.innerHTML = '4.components'
const routerMap = {
"1": div1,
"2": div2,
"3": div3,
"4": div4
}
function route(container) {
// 獲取路由hash 值
let hashName = window.location.hash.substr(1)
console.log(hashName)
hashName = hashName || '1'
// 獲取路由對應的組件
const components = routerMap[hashName]
if(!components) {
// 404
components = document.querySelector("#div404");
}
components.style.display = 'block'
console.log(components)
// 展示界面
container.innerHTML = "";
container.appendChild(components);
}
route(app)
window.addEventListener('hashchange', () => {
route(app);
})到這里以已經完成了一個js 版的簡易路由,在不考慮嵌套的情況下,路由的基本功能已經完成,主要核心的思路其實就是使用 HTML5 中的 hash 提供的一個 api hashchange, 使用這個來監聽hash 的變化, 然后去渲染不同的組件
const app = document.getElementById('app')
const div1 = document.createElement('div')
div1.innerHTML = '1.components'
const div2 = document.createElement('div')
div2.innerHTML = '2.components'
const div3 = document.createElement('div')
div3.innerHTML = '3.components'
const div4 = document.createElement('div')
div4.innerHTML = '4.components'
const routerMap = {
"/1": div1,
"/2": div2,
"/3": div3,
"/4": div4
};
function route(container) {
// 獲取路由hash 值
let hashName = window.location.pathname;
if (hashName === "/") {
hashName = "/1";
}
// 獲取路由對應的組件
let components = routerMap[hashName]
if(!components) {
// 404
components = document.querySelector("#div404");
}
components.style.display = 'block'
// 展示界面
container.innerHTML = "";
container.appendChild(components);
}
const allA = document.querySelectorAll("a.link");
for(let a of allA) {
a.addEventListener('click', ()=> {
e.preventDefault();
const href = a.getAttribute("href");
window.history.pushState(null, `page ${href}`, href);
// 路由變化更新
onStateChange(href);
})
}
route(app)
function onStateChange() {
route(app);
}這里其實html部分是一樣的,相比于hashRouter, 變化點在于 Hsitory 模式無法去監聽路由的變化需要在變化的時候手動去更新組件, 還有就是使用的api 變成了 window.history.pushState
memoryRouter 其實對于前端來說接觸的不多,因為這個路由模式更多的是出現在App上,他不適合出現在h6或者pc 上, 這種路由適合看不見的地方
const app = document.getElementById('app')
const div1 = document.createElement('div')
div1.innerHTML = '1.components'
const div2 = document.createElement('div')
div2.innerHTML = '2.components'
const div3 = document.createElement('div')
div3.innerHTML = '3.components'
const div4 = document.createElement('div')
div4.innerHTML = '4.components'
const routerMap = {
"/1": div1,
"/2": div2,
"/3": div3,
"/4": div4
};
function route(container) {
// 獲取路由hash 值
let number = window.localStorage.getItem("pathName");
if (hashName === "/") {
hashName = "/1";
}
// 獲取路由對應的組件
let components = routerMap[hashName]
if(!components) {
// 404
components = document.querySelector("#div404");
}
components.style.display = 'block'
// 展示界面
container.innerHTML = "";
container.appendChild(components);
}
const allA = document.querySelectorAll("a.link");
for(let a of allA) {
a.addEventListener('click', ()=> {
e.preventDefault();
const href = a.getAttribute("href");
window.localStorage.setItem("pathName", href);
// 路由變化更新
onStateChange(href);
})
}
route(app)
function onStateChange() {
route(app);
}上面已經實現了 memoryRouter, 其實就把路由藏起來了,在某個地方去獲取
感謝各位的閱讀，以上就是“怎么用原生js代碼實現前端簡易路由”的內容了，經過本文的學習后，相信大家對怎么用原生js代碼實現前端簡易路由這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
