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>