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

关于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

实现中的细节节点已经在源码中做了详细的注释。如有疑问可留言互相交流

实现源码: 自取https://download.csdn.net/download/qq_15243963/12046738