这篇文章主要讲解了“怎么用原生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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。