绝对能看懂的Vue-Router之hash模式

retun_true

于 2024-08-27 10:15:44 发布

阅读量311

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41092986/article/details/141592587

版权

事情的起因是被女神问道：vue-router是不是只有hash和history模式

当时我猛的点点头，后来女神轻蔑一笑就走了。

于是就有了接下来的正文

这个系列分为3篇文章，这是第一篇

作为大前端我们应该都知道什么是hash模式，这是vue-router的默认的一种模式，里面有显眼的#号在URL地址栏中。需要注意的是我们讨论的都是SPA单页面应用，这种模式不会引起页面的刷新，提高页面访问速度

vue-router hash模式的工作原理就是（下面这段话记着，可能面试要考🤐）

总结：把前端路由的路径用井号 # 拼接在真实 url 后面的模式，通过监听 URL 的哈希部分变化，相应地更新页面的内容。

分述一：前端路由的处理完全在客户端进行，当路由发生变化时，只会改变 URL 中的哈希部分(井号 # 后面的路径)，且不会向服务器发送新的请求，而是触发 onhashchange 事件。

分述二：只有#符号之前的内容才会包含在请求中被发送到后端，hash 永远不会提交到 server 端。

分述三（加分）：hash值的改变，都会在浏览器的访问历史中增加一个记录，所以可以通过浏览器的回退、前进按钮控制hash的切换

分述四（加分）：hash 路由不会造成 404 页面的问题，因为所有路由信息都在客户端进行解析和处理，服务器只负责提供应用的初始 HTML 页面和静态资源，不需要关心路由的匹配问题

以下是实践部分

<body>
    <p>vue-router - hash</p>
    <button id="btn1">修改 hash1</button>
    <button id="btn2">修改 hash2</button>

    <script>
        // hash 变化，包括：
        // 1. JS 修改 url
        // 2. 手动修改 url 的 hash
        // 3. 浏览器前进、后退
        window.onhashchange = (event) => {
            console.log('oldURL:', event.oldURL)
            console.log('newURL:', event.newURL)
            console.log('hash:', location.hash)
        }

        // JS 修改 url
        document.getElementById('btn1').addEventListener('click', () => {
            location.href = '#/customHash'
        })
        document.getElementById('btn2').addEventListener('click', () => {
            location.hash = '/position/hash'
        })
    </script>
</body>