hash和history原生事件

本文主要是介绍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>

这篇关于hash和history原生事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！