djdg626的博客

前端路由映射简单模拟

发布于：
js代码片段

#Hash

hash使用了锚点，监听hashchange事件，缺点是url里面有一个#
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')
 
    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文件，需要特殊处理（在nginx中进行配置）
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>