溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由

發(fā)布時(shí)間：2022-05-19 13:48:22 來源：億速云 閱讀：144 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“怎么用原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由”吧！

路由到底是一個(gè)什么東西?

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

通俗點(diǎn)來講,路由就是把一個(gè)url 發(fā)送到后端服務(wù)器上,然后獲取對(duì)應(yīng)的后端資源

實(shí)現(xiàn)一個(gè) 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" >你要找的內(nèi)容被狗吃了</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'
  // 獲取路由對(duì)應(yīng)的組件
  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)完成了一個(gè)js 版的簡(jiǎn)易路由,在不考慮嵌套的情況下,路由的基本功能已經(jīng)完成,主要核心的思路其實(shí)就是使用 HTML5 中的 hash 提供的一個(gè) api hashchange, 使用這個(gè)來監(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";
  }

  // 獲取路由對(duì)應(yīng)的組件
  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);
}

這里其實(shí)html部分是一樣的,相比于hashRouter, 變化點(diǎn)在于 Hsitory 模式無法去監(jiān)聽路由的變化需要在變化的時(shí)候手動(dòng)去更新組件, 還有就是使用的api 變成了 window.history.pushState

memoryRouter

memoryRouter 其實(shí)對(duì)于前端來說接觸的不多,因?yàn)檫@個(gè)路由模式更多的是出現(xiàn)在App上,他不適合出現(xiàn)在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";
  }

  // 獲取路由對(duì)應(yīng)的組件
  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)實(shí)現(xiàn)了 memoryRouter, 其實(shí)就把路由藏起來了,在某個(gè)地方去獲取

感謝各位的閱讀，以上就是“怎么用原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手