40行原生js代碼實現(xiàn)前端簡易路由

更新時間：2022年05月19日 11:15:02 作者：蝸牛工程師

路由就是指隨著瀏覽器地址欄的變化,展示給用戶的頁面也不相同,下面這篇文章主要給大家介紹了關于如何通過40行原生js代碼實現(xiàn)前端簡易路由的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在使用Vue或者是React 的路由的時候,不是很清楚他們的思路,導致在理解這些思想上出現(xiàn)了很多問題,于是自己實現(xiàn)了一個簡易的原生js實現(xiàn)的前端路由,并整理了一下前端會遇到的集中路由模式和區(qū)別, 來幫助學習路由

路由到底是一個什么東西?

路由（routing）就是通過互聯(lián)的網(wǎng)絡把信息從源地址傳輸?shù)侥康牡刂返幕顒?。路由發(fā)生在OSI網(wǎng)絡參考模型中的第三層即網(wǎng)絡層

通俗點來講,路由就是把一個url 發(fā)送到后端服務器上,然后獲取對應的后端資源

實現(xiàn)一個 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);
})

到這里以已經(jīng)完成了一個js 版的簡易路由,在不考慮嵌套的情況下,路由的基本功能已經(jīng)完成,主要核心的思路其實就是使用 HTML5 中的 hash 提供的一個 api hashchange, 使用這個來監(jiān)聽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 模式無法去監(jiān)聽路由的變化需要在變化的時候手動去更新組件, 還有就是使用的api 變成了 window.history.pushState

memoryRouter

memoryRouter 其實對于前端來說接觸的不多,因為這個路由模式更多的是出現(xiàn)在App上,他不適合出現(xiàn)在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);
}

上面已經(jīng)實現(xiàn)了 memoryRouter, 其實就把路由藏起來了,在某個地方去獲取

最后做個總結

hashRouter 典型的就是路由中會出現(xiàn)#, 在頁面中會出現(xiàn)錨點跳轉, 還有一個重要需要注意的點就是, 使用 hashRouter 在 # 后面拼接的東西會被瀏覽器屏蔽掉, 谷歌推出了一個方法, 就是在前面加上一個!但是也不能根治
historyRouter 在路由中沒有 #, 雖然變好看了, 但是需要后端配合前端來實現(xiàn), 因為在路由發(fā)生變化的時候, 用戶會刷新頁面, 所以需要后端把所有的url 都返回一個頁面, 404 頁面除外
memoryRouter 用的比較少, 了解一下就可以了,它相當于一個看不見的路由, 出現(xiàn)在app 中

最后附上github 鏈接

到此這篇關于40行原生js代碼實現(xiàn)前端簡易路由的文章就介紹到這了,更多相關原生js實現(xiàn)前端路由內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: