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>
标签:原生,console,log,window,location,hash,history,myBtn 来源: https://www.cnblogs.com/wuqilang/p/15134932.html