history模式下的路由

与hash模式下的路由不同的是history路由没有‘#’更加美观，但是需要后端的协助，不然在切换路由的时候会报404的错，而且hash模式的兼容性更加广泛，那为什么还是要使用history模式呢？
1·hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了
2·hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制
3·history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

   <div>
        <ul>
            <li><a href="/path1">path1</a></li>
            <li><a href="/path2">path2</a></li>
        </ul>
        <div id= "route-view"></div>
    </div>
    <script type="text/javascript">
        // 在这里我们需要对window进行事件监听
        //用到的DOMContentLoaded和popstate在上面有介绍
        window.addEventListener('DOMContentLoaded',Load)
        window.addEventListener('popstate', PopChange)
        var routeView = null
        function Load () {
            // 默认执行一次popstate的回调函数, 匹配一次页面组件
            routeView = document.getElementById("route-view")
            PopChange()
            // 获取所有a标签中所有带href的标签
            var aList = document.querySelectorAll("a[href]")
            aList.forEach(aNode => aNode.addEventListener('click', function(e){
                e.preventDefault() // 阻止a标签的默认事件
                // 手动修改浏览器的地址栏
                var href = aNode.getAttribute('href')
                // 使用history.pushState修改地址栏
                history.pushState(null, '', href)
                PopChange()
 
            }))
        }
        function PopChange () {
            console.log('localhost', location)
            switch (location.pathname) {
                case '/path1':
                     routeView.innerHtml = 'toPage1' 
                     return
                case '/path2': 
                    routeView.innerHtml = 'toPage2' 
                    return
                default: 
                    routeView.innerHtml = 'toPage1'
                    return
            }
        }
 </script>