怎么用原生js代码实现前端简易路由

这篇文章主要讲解了"怎么用原生js代码实现前端简易路由"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用原生js代码实现前端简易路由"吧！

路由到底是一个什么东西?

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。路由发生在OSI网络参考模型中的第三层即网络层

通俗点来讲,路由就是把一个url 发送到后端服务器上,然后获取对应的后端资源

实现一个 hashRouter

// html部分  go to 1   go to 2   go to 3  go to 4    
  
你要找的内容被狗吃了
  // jsconst app = document.getElementById('app')const div1 = document.createElement('div')div1[xss_clean] = '1.components'const div2 = document.createElement('div')div2[xss_clean] = '2.components'const div3 = document.createElement('div')div3[xss_clean] = '3.components'const div4 = document.createElement('div')div4[xss_clean] = '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[xss_clean] = "";  container.appendChild(components);}route(app)window.addEventListener('hashchange', () => {  route(app);})

到这里以已经完成了一个js 版的简易路由,在不考虑嵌套的情况下,路由的基本功能已经完成,主要核心的思路其实就是使用 HTML5 中的 hash 提供的一个 api hashchange, 使用这个来监听hash 的变化, 然后去渲染不同的组件

historyRouter

const app = document.getElementById('app')const div1 = document.createElement('div')div1[xss_clean] = '1.components'const div2 = document.createElement('div')div2[xss_clean] = '2.components'const div3 = document.createElement('div')div3[xss_clean] = '3.components'const div4 = document.createElement('div')div4[xss_clean] = '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[xss_clean] = "";  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

memoryRouter 其实对于前端来说接触的不多,因为这个路由模式更多的是出现在App上,他不适合出现在h6或者pc 上, 这种路由适合看不见的地方

const app = document.getElementById('app')const div1 = document.createElement('div')div1[xss_clean] = '1.components'const div2 = document.createElement('div')div2[xss_clean] = '2.components'const div3 = document.createElement('div')div3[xss_clean] = '3.components'const div4 = document.createElement('div')div4[xss_clean] = '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[xss_clean] = "";  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代码实现前端简易路由这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！