VueRouter路由原理以及hash模式与history模式的区别

<script>
// hash路由原理***************************
// 监听hashchange方法
window.addEventListener('hashchange',()=>{
div.innerHTML = location.hash.slice(1)
})

// history路由原理************************
// 利用html5的history的pushState方法结合window.popstate事件（监听浏览器前进后退）

function routerChange (pathname){
history.pushState(null,null,pathname)
div.innerHTML = location.pathname
}
window.addEventListener('popstate',()=>{
div.innerHTML = location.pathname
})

// hash与history区别**********************
// hash     通过#锚点进行跳转，url会更改，浏览器可以前进和后退，浏览器不会刷新
// 不会把请求发送到后台去，不会和服务端有交流

// history  需要服务端进行配合
</script>