Vue-Router之hash模式简单分析

继上篇实现了Vue-Router中的history模式,今天来看一下Router的另一种模式,(Hash)哈希模式

Hash整体来说 要不history简单很多,当然代码量也少了很多,这里只是简单的实现一下,如果需要深入了解的同学,可以看一下具体的源码是怎么实现的, 这里就直接上代码吧

首先还是html 需要两个a标签

    <div>
        <ul>
            <li> <a href="#/routerHash-path1">routerHash-path1</a></li>
            <li> <a href="#/routerHash-path2">routerHash-path2</a></li>
            <li> <a href="#/routerHash-path3">routerHash-path3</a></li>
        </ul>
        <div id="route-hash"></div>
    </div>

js 代码如下

<script type="text/javascript">
        window.addEventListener('DOMContentLoaded', load)
        window.addEventListener('hashchange', hashchange)
        var routeview = null
        function Load () {
            routeview = document.getElementById('route-hash')
            hashchange()
        }
        function hashchange () {
            switch (location.hash) {
                //通过选择case使用location.hash来实现改变浏览器url
                case "#/routerHash-path1":
                routeview.innerHTML = "routerHash-path1"
                return
                case "#/routerHash-path2":
                routeview.innerHTML = "routerHash-path2"
                return
                case "#/routerHash-pat3":
                routeview.innerHTML = "routerHash-path3"
                return
                default:
                routeview.innerHTML = "routerHash-path1"
                return
            }
        }
  </script>

在看完history模式的同学回过来看这一块的代码,会发现还是很好理解的,所以在这里我就不做太多的解释了 至此结束