手写vue-router，理解原理，写啥都不是事

最新推荐文章于 2024-10-24 11:43:00 发布

Crying_cat

最新推荐文章于 2024-10-24 11:43:00 发布

阅读量253

点赞数

分类专栏： web前端 vuejs

本文链接：https://blog.youkuaiyun.com/qq_15243963/article/details/103660735

版权

web前端同时被 2 个专栏收录

8 篇文章

订阅专栏

vuejs

4 篇文章

订阅专栏

本文深入探讨Vue Router的两种模式：hash与history。hash模式利用URL的hash部分实现单页面应用的路由跳转，而history模式则通过HTML5的History API实现更平滑的页面切换。文章详细解释了两种模式的工作原理，并提供了实现源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue-router我们简单的实现他的hash模式和history模式。这两种模式可以做到单页面应用路由跳转页面不刷新，实现之前我们来分析一下实现原理。

hash的原理

比如 http://localhost:8080/#/about 这样的路由
我们通过location.hash 可以取到 /#/about 这样的部分。不管hash如何变化我们只需要/about这部分就好了

所以我们只要监听 window的load事件和hashchange事件即可

history原理

histroy采用的是h5的history api实现的页面跳转

<a onclick="go(/home)">首页</a>
<a onclick="go(/about)">关于</a>
<div id="html"></div>
 
<script >
    function go(pathname) {
        history.pushState({},null,pathname)
    }
    window.addEventListener('popstate',()=>{
        go(location.pathname);
    })
</script>

_route是一个响应式的路由route对象，这个对象会存储我们路由信息，它是通过Vue提供的Vue.util.defineReactive来实现响应式的，下面的get和set便是对它进行的数据劫持；
route和$router是定义在Vue.prototype上的两个getter。前者指向_root下的_route，后者指向_root下的_router