你真的會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，有興趣的能夠再看一下，實際狀況中要考慮的因素確定比我寫的要複雜的多，好比路由守衛、編程式跳轉，有興趣的話能夠去想一想如何實現的，我只是起一個拋磚引玉的做用，你們一塊兒加油