你真的会vue-router吗？

前记

vue-router是咱们你们都知道的 Vue.js 的官方路由管理器，相信每一个熟悉 Vue 的人都有用过。但对于它的原理不知道你们有没有思考过，上周末大体看了一下vue-router的源码，理解了它的思路，接下来就让我用简单的几行代码去实现它吧。此次实现我主要讲解的是hash路由，history路由原理差很少，但须要后端配合。

下面是实现的最终效果图

能够看出页面并无刷新

源码在这里：Mrlgm

router-link的本质

对于router-link编译后的实际标签，相信细心的同志早就发现了那其实只是一个a标签

<router-link to="/foo">Go to Foo</router-link>
复制代码

会被转化成

<a href="#/foo">Go to Foo</a>
复制代码

阻止a标签的默认事件，手动来更换url

咱们都知道a标签不可避免的会形成页面跳转或者刷新，这个时候咱们须要手动阻止它的默认事件

e.preventDefault()
复制代码

preventDefault是阻止默认事件，并非阻止冒泡，这咱们要搞清楚。阻止默认事件以后会形成一个问题，那就是URL也不会刷新了

没有关系，咱们能够手动去更改URL，总体代码就是这样子了

<a id="router1" href="/hhh">跳转到hhh页面</a>

router1.addEventListener('click', function (e) {
    e.preventDefault()
    location.hash = `${e.target.hash}`
})
复制代码

监听URL的变化，实现页面内容的切换

页面URL的变化，hash模式的话，只须要监听hashchange就能够发现页面的变化，只要监听到了事件，咱们就能够来进行页面的操做了，代码以下

<div id="root"></div>

window.addEventListener('hashchange', function (e) {
    let hash = e.target.location.hash
    if (hash === '#/') {
      root.innerText = '这是主页'
    } else if (hash === '#/hhh') {
      root.innerText = '这是hhh页'    
    }
})
复制代码

注意，history模式监听的事件和hash模式不同，有兴趣的能够本身去看一下，可是思想实际上是一致的

页面刷新内容不变

由于，hashchange只有在URL改变的时候才会触发，因此当咱们刷新页面的时候，也要去匹配URL，很是简单，代码以下

if (window.location.hash === '#/') {
    root.innerText = '这是主页'
} else if (window.location.hash === '#/hhh') {
    root.innerText = '这是hhh页'
}
复制代码

总结

到此为止，简单的vue-router就实现了，参考vue-router的源码主要有这么两篇link.js和 hash.js，有兴趣的能够再看一下，实际状况中要考虑的因素确定比我写的要复杂的多，好比路由守卫、编程式跳转，有兴趣的话能够去想一想如何实现的，我只是起一个抛砖引玉的做用，你们一块儿加油