hash和history原生事件

hash：

    <button id="myBtn">按钮</button>
    <script>
      // 监听hash的变化：手动去改路由、浏览器前进后退、点击事件更改hash
      window.onhashchange = (e) => {
        console.log('老url', e.oldURL)
        console.log('新url', e.newURL)
        console.log('hash', location.hash)
      }
      // DOM加载完毕事件：DOMContentLoaded
      window.addEventListener('DOMContentLoaded', () => {
        console.log(location.hash)
      })
      const myBtn = document.getElementById('myBtn')
      myBtn.addEventListener('click', () => {
        location.href = '#/bbb'
      })
    </script>

 

history：

    <button id="myBtn">按钮</button>
    <script>
      // DOM加载完毕事件：DOMContentLoaded
      window.addEventListener('DOMContentLoaded', () => {
        console.log('path', location.pathname)
      })
      const myBtn = document.getElementById('myBtn')
      myBtn.addEventListener('click', () => {
        history.pushState({ name: 'user' }, '', 'user')
        console.log('路由切换到', 'user')
      })
      // 监听浏览前进后退
      window.onpopstate = (e) => {
        console.log('onpopstate', e.state, location.pathname)
      }
    </script>