前端路由映射简单模拟

最新推荐文章于 2024-07-24 11:09:48 发布

djdg626

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量66

点赞数

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

本文链接：https://blog.csdn.net/qq_25080529/article/details/128673348

版权

Demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

hash

hash使用了锚点，监听hashchange事件，缺点是url里面有一个#

<body>
  <nav>
    <a href="#/home">home</a>
    <a href="#/about">about</a>
    <a href="#/profile">profile</a>
    <a href="#/noMatch">404</a>
  </nav>
  <main>
    <h1 class="content">home content</h1>
  </main>
  <script>
    const content = document.querySelector('.content')

    window.addEventListener('hashchange', () => {
      switch (location.hash) {
        case '#/home':
          content.innerHTML = 'home content'
          break
        case '#/about':
          content.innerHTML = 'about content'
          break
        case '#/profile':
          content.innerHTML = 'profile content'
          break
        default:
          content.innerHTML = '404'
          break
      }
    })
  </script>
</body>

history

history模式，使用h5的history api，缺点是一旦刷新就会找不到对应的html文件，需要特殊处理

<body>
  <nav>
    <a href="home">home</a>
    <a href="about">about</a>
    <a href="profile">profile</a>
    <a href="noMatch">404</a>
  </nav>
  <main>
    <h1 class="content">home content</h1>
  </main>
  <script>
    const content = document.querySelector('.content')

    const aTags = document.querySelectorAll('a')

    aTags.forEach(a =>
      a.addEventListener('click', e => {
        e.preventDefault()

        const href = a.getAttribute('href')

        history.pushState({}, '', href)

        historyChange()
      })
    )

    function historyChange() {
      console.log(location.pathname)
      switch (location.pathname) {
        case '/home':
          content.innerHTML = 'home content'
          break
        case '/about':
          content.innerHTML = 'about content'
          break
        case '/profile':
          content.innerHTML = 'profile content'
          break
        default:
          content.innerHTML = '404'
          break
      }
    }
  </script>
</body>