继上一篇vue-router中History模式后Hash模式解析-[迷糊小苦瓜 -掘金同名]

本文链接：https://blog.csdn.net/weixin_44036553/article/details/127426851

时隔一年,继上次的history后Hash本应该在时隔一周后发出来的,但是由于工作的一些事情,一直没有时间,就忘记了还有博文这个东西.
不过时隔一年也是可以的,相信很多人还是不理解路由中的两个模式实现,如果不理解Hash可以看一下当前的文章,也可以自己跟着敲一遍,如果不理解History的话,建议看一下上一篇文章
话不多说现在开始

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>