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原生事件

上一篇:STM32F103寄存器方式点亮LED流水灯


下一篇:浅谈线性筛能筛的函数