vue-router的两种路由模式hash和history，区别以及它们的底层实现原理

veggie_a_h

已于 2022-03-25 21:56:24 修改

阅读量5.1k

点赞数 9

分类专栏：前端面试前端知识点基础 HTML 文章标签： vue.js javascript

于 2022-03-13 22:11:49 首次发布

本文链接：https://blog.csdn.net/wanghe1111_/article/details/123467530

版权

前端面试同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

前端知识点基础

21 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

vue的两种路由模式hash和history模式以及它们的底层实现原理

路由主要分为两种模式，分别是hash和history模式，下面我将对他们在vue中的使用方式以及vue的路由实现原理进行讲解。

<router-link to=""/> 相当于路由入口，会被渲染成一个a标签，to会被渲染成href属性
<router-view /> 相当于一个出口，用来做预渲染的，他会根据路由来匹配组件，然后把组件渲染出来

在vue的router中，通过修改vueRouter的mode属性来决定使用history还是hash。默认为hash模式。

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

hash和history的区别

hash模式的url后跟hash值#…，它的原理就是使用window.onHashChange来监听hash值的改变，一旦发生变化就找出此hash值所匹配的组件，进而将组件渲染到页面中。但是hash模式这种带hash值的url是非常丑的，项目中也很少用hash模式。

history模式中的url是以/user这种格式，比较常见，它的原理是通过window.onpopstate来监听路由变化，进而匹配不同的组件来渲染出来。

vue的hash模式实现原理

hash模式主要是根据url的hash值来跳转不同的路由页面。
采用hash模式的路由模式中，url后面有一个#，#后面包括#就是此路由的hash值，hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:
vue中hash模式的原理就是通过监听hash值的变化来匹配不同的组件，进而来重新渲染视图。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我修改hash值呦</button>
    <script>
        let btn = document.querySelector("#btn")
        btn.addEventListener("click", () => {
            console.log(1);
            location.href = "#/user"
        })
        // hash值一旦修改就会触发
        window.onhashchange = (e) => {
            console.log(e.oldURL);
            console.log(e.newURL);
            console.log(location.hash);
        }
    </script>
</body>

</html>

vue的history模式实现原理

history路由中我们使用onpopstate事件函数来监听history路由的变化，但是popstate事件函数只能监听到history.go、forward、back的切换路由方式，但是它不能够监听到pushState添加历史记录（就是在页面中点击某个a标签进行跳转的方式，点击页面顺序：a->b->c，记录的历史记录中a、b、c都存在，而replaceState则不同）、replaceState（点击页面顺序：a->b->c，记录的历史记录中只有a->c，即用c代替了b记录，b记录被删除了）切换路由的方式。

    // 1监听路由变化
    // 路由的两种模式：hash、history
    // 监听hash路由使用window.onhashchange
    //history路由:采用history.go、history.back、history.forword方法来进行路由跳转
    // 在history路由中我们使用onpopstate事件函数来监听history路由的变化，但是popstate事件函数只能监听到history.go、forward、back的切换路由方式，
    window.addEventListener("popstate", () => {
        console.log(11);
    })
    // 但是它不能够监听到pushState添加历史记录（就是在页面中点击某个a标签进行跳转的方式，点击页面顺序：a->b->c，记录的历史记录中a、b、c都存在，而replaceState则不同）、replaceState（点击页面顺序：a->b->c，记录的历史记录中只有a->c，即用c代替了b记录，b记录被删除了）切换路由的方式
    // 对于pushState、replaceState需要通过函数重写的方式进行劫持，也就是说我们重写pushState和replaceState
    // 但是我们一般都是pushState来跳转链接，是通过this.$router.replace()来触发；而pushState()是通过this.$router.push()来触发
    // 重写pushState方法
    const rawPushState = window.history.pushState
    window.history.pushState = function (...args) {
        rawPushState.apply(window.history, args)
        console.log("终于监视到pushState了");
    }
    // 重写replaceState方法
    const rawReplaceState = window.history.replaceState
    window.history.replaceState = function (...args) {
        rawReplaceState.apply(window.history, args)
        console.log("终于监视到replaceState了");
    }