两种前端路由的原理之hash&history

最新推荐文章于 2024-07-15 09:43:41 发布

风中告退

最新推荐文章于 2024-07-15 09:43:41 发布

阅读量148

点赞数 4

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42698576/article/details/109203771

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

路由的分类
- hash
- html5 api history
为什么使用路由？
- SPA：single page application
- 页面的地址栏跳转

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>router</title>
</head>
<body>
  <ul>
    <li to="/movie">电影</li>
    <li to="/theater">影院</li>
  </ul>
  <div id="view"></div>
  <div>
    <button id="back">back</button>
    <button id="go">go</button>
  </div>
  <script src="./history.js"></script>
</body>
</html>

hash.js

const view = document.querySelector('#view')

const Movie = () => {
  view.innerHTML = `
    <div>电影列表</div>
  `
}
const Theater = () => {
  view.innerHTML = `
    <div>影院列表</div>
  `
}

window.addEventListener('load', Movie, false)

window.addEventListener('hashchange', () => {
  let hash = location.hash
  switch(hash) {
    case '#/movie':
      Movie()
      break;
    case '#/theater':
      Theater()
      break;
    default:
      Movie()
  }
}, false)

history.js

const history = window.history

const lis = document.querySelectorAll('li')

const Movie = () => {
  view.innerHTML = `
    <div>电影列表</div>
  `
}
const Theater = () => {
  view.innerHTML = `
    <div>影院列表</div>
  `
}

function render() {
  let pathname = location.pathname

  switch(pathname) {
    case '/':
    case '/movie':
      // history.pushState({id: 2}, '', '/movie')
      Movie()
      break;
    case '/theater':
      // history.pushState({id: 2}, '', '/theater')
      Theater()
      break;
    default:
      break;
  }
}

// popstate, 在浏览器的前进后退按钮被点击的时候触发
window.addEventListener('popstate', () => {
  render()
}, false)

document.querySelector('#back').addEventListener('click', () => {
  history.back()
}, false)

document.querySelector('#go').addEventListener('click', () => {
  history.go(1)
  console.log(history.state)
}, false)

lis.forEach((li, index) => {
  li.addEventListener('click', () => {
    const to = li.getAttribute('to')
    history.pushState({id: 2}, '', to)
    render()
  }, false)
})