首页 > 网络编程 > JavaScript > javascript技巧 > 原生js实现前端路由

40行原生js代码实现前端简易路由

2022-05-19 11:10:24 作者：蜗牛工程师

路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同,下面这篇文章主要给大家介绍了关于如何通过40行原生js代码实现前端简易路由的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由

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

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

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

实现一个 hashRouter

// 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" style="display: none;">你要找的内容被狗吃了</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 的变化, 然后去渲染不同的组件

historyRouter

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

memoryRouter 其实对于前端来说接触的不多,因为这个路由模式更多的是出现在App上,他不适合出现在h5或者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, 其实就把路由藏起来了,在某个地方去获取

最后做个总结

hashRouter 典型的就是路由中会出现#, 在页面中会出现锚点跳转, 还有一个重要需要注意的点就是, 使用 hashRouter 在 # 后面拼接的东西会被浏览器屏蔽掉, 谷歌推出了一个方法, 就是在前面加上一个!但是也不能根治
historyRouter 在路由中没有 #, 虽然变好看了, 但是需要后端配合前端来实现, 因为在路由发生变化的时候, 用户会刷新页面, 所以需要后端把所有的url 都返回一个页面, 404 页面除外
memoryRouter 用的比较少, 了解一下就可以了,它相当于一个看不见的路由, 出现在app 中

最后附上github 链接

到此这篇关于40行原生js代码实现前端简易路由的文章就介绍到这了,更多相关原生js实现前端路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！