vue-tutorial
vue-tutorial copied to clipboard
Published
20 hours ago •
Wscats
Wscats
vue路由原理
hashchange
现在大部分单页面应用程序的路由切换都是以下这种方式
http://www.xxx.com/#/index
这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作
<body>
<a href="#/index">index</a>
<a href="#/home">home</a>
<script>
function matchAndUpdate() {
// 匹配 hash 做 dom 更新操作
console.log("路由切换了");
}
window.addEventListener('hashchange', matchAndUpdate)
</script>
</body>
