单页面路由跳转之hash模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了单页面路由跳转之hash模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

hash模式

hash模式主要通过监听URL地址的哈希值的变化来实现页面更新文章来源地址https://www.toymoban.com/news/detail-719973.html

function routeHandle() {
  let appElm = document.querySelector('#app')
  let hash = window.location.hash.slice(1)

  switch (hash) {
    case '':
    case '/':
    case '/home':
      appElm.innerHTML = `
        <h1>Home</h1>
        <button id="toListBtn">to list</button>
      `
      bindEvent()
      break
    case '/list':
      appElm.innerHTML = `
        <h1>List</h1>
        <button id="toHomeBtn">to home</button>
      `
      bindEvent()
      break
    default:
      appElm.innerHTML = `
        <h1>404</h1>
      `
      break
  }
}

window.addEventListener('hashchange', routeHandle, false)

完整代码

<body>
  <div id="app"></div>
</body>

function routeHandle() {
  let appElm = document.querySelector('#app')
  let hash = window.location.hash.slice(1)

  switch (hash) {
    case '':
    case '/':
    case '/home':
      appElm.innerHTML = `
        <h1>Home</h1>
        <button id="toListBtn">to list</button>
      `
      bindEvent()
      break
    case '/list':
      appElm.innerHTML = `
        <h1>List</h1>
        <button id="toHomeBtn">to home</button>
      `
      bindEvent()
      break
    default:
      appElm.innerHTML = `
        <h1>404</h1>
      `
      break
  }
}

function toListBtnHandle() {
  window.location.hash = '#/list'
}

function toHomeBtnHandle() {
  window.location.hash = '#/'
}

function bindEvent() {
  let toListBtnElm = document.querySelector('#toListBtn')
  let toHomeBtnElm = document.querySelector('#toHomeBtn')

  toListBtnElm && toListBtnElm.addEventListener('click', toListBtnHandle, false)
  toHomeBtnElm && toHomeBtnElm.addEventListener('click', toHomeBtnHandle, false)
}

window.addEventListener('hashchange', routeHandle, false)

;(() => {
  routeHandle()
})()