前言
經過上一節課的學習，我們已經完成了提取我們想要的路由資訊資料格式，提取完畢了之後，接下來我們該幹什麼，接下來需要做的步驟就是監聽路由的變化，儲存當前的路由。
那麼就會遇到幾個問題，就是怎麼監聽，怎麼儲存，我們先回到 VueRouter 的官方文件，點選右上角的 API 參考，然後拖動到底部，在底部找到元件注入，當中的注入的屬性：
其實我們在使用 VueRouter 的時候，只要你註冊了 VueRouter 之後，他會在每一個 Vue 例項中都新增兩個屬性，一個是 $router，一個是 $route，這兩個屬性是什麼呢？
$router
其實對應著就是我們自定義的 NueRouter 物件。
$route
$route 其實對應著就是一個普通的物件，這個物件就儲存了當前的路由地址，等等等等一系列資訊，所以為了將來能夠注入這兩個物件，我這裡單獨寫一個類來儲存這兩個物件相關的資訊。
程式碼實現
class NueRouterInfo {
constructor() {
this.currentPath = null;
}
}
透過這個類，我們就可以儲存當前的路由地址，預設等於 null，將來路由地址發生變化的時候，我們就可以修改這個值。
定義好了這個類我們是需要使用這個類，所以我們在哪裡進行使用呢，我們在 NueRouter 類中進行使用，我們在 NueRouter 類中定義一個屬性，這個屬性就是 NueRouterInfo 的例項，然後在 NueRouter 的建構函式中進行初始化路由資訊。
首先定義 NueRouterInfo 的例項:
this.routerInfo = new NueRouterInfo();
然後在 NueRouter 的建構函式中進行初始化路由資訊，我這裡定義一個 initDefault 方法，然後在這個方法中進行初始化路由資訊，這個方法是在 NueRouter 的建構函式中進行呼叫的。
在 initDefault 方法中，首先根據當前的 mode 也就是路由模式來進行走不同分支的邏輯程式碼，如果是 hash 模式，那麼我們就需要監聽 hashchange 事件，如果是 history 模式，那麼我們就需要監聽 popstate 事件。
這是其中的一步，我們的第一步其實並不是監聽，首先要處理的就是，開啟的介面先判斷 mode 模式如果是 hash，看看介面有沒有 hash，如果沒有就跳轉到 #/，如果有就不用管了，如果是 history 模式，那麼就看看介面有沒有 history，如果沒有就跳轉到 /，如果有就不用管了。
第二步才是監聽，監聽的時候，我們需要將當前的路由地址儲存到 NueRouterInfo 的例項中，好了，我們來看看程式碼怎麼寫。
initDefault() {
if (this.mode === 'hash') {
// 1.判斷開啟的介面有沒有hash, 如果沒有就跳轉到#/
if (!location.hash) {
location.hash = '/';
}
// 2.載入完成之後和hash發生變化之後都需要儲存當前的地址
window.addEventListener('load', () => {
this.routerInfo.currentPath = location.hash.slice(1);
});
window.addEventListener('hashchange', () => {
this.routerInfo.currentPath = location.hash.slice(1);
console.log(this.routerInfo);
});
} else {
// 1.判斷開啟的介面有沒有路徑, 如果沒有就跳轉到/
if (!location.pathname) {
location.pathname = '/';
}
// 2.載入完成之後和history發生變化之後都需要儲存當前的地址
window.addEventListener('load', () => {
this.routerInfo.currentPath = location.pathname;
});
window.addEventListener('popstate', () => {
this.routerInfo.currentPath = location.pathname;
console.log(this.routerInfo);
});
}
}
測試
程式碼寫完了，我們來測試一下，先在 app.vue 中定義兩個 a 標籤 href 是 hash 模式程式碼如下：
<template>
<div id="app">
<a href="#/home">首頁</a>
<a href="#/about">關於</a>
</div>
</template>
<style>
</style>
然後在更改一下 NueRouter 的傳參，將 mode 改成 hash 模式, 我們來測試第一步我們處理的邏輯，開啟介面，看看有沒有 hash，如果沒有就跳轉到 #/，如果有就不用管了。
首先訪問：http://localhost:8080/ ，然後我們看看介面的位址列，發現沒有 hash，預設就會跳轉到 #/:
然後我們再訪問：http://localhost:8080/#/home ，然後我們看看介面的位址列，發現有 hash，就不用管了:
接下來我們測試第二步，監聽 hashchange 事件，我們在 hashchange 事件中列印了 NueRouterInfo 的例項，看看有沒有儲存當前的路由地址，我們分別點選首頁和關於，列印結果如下：
好了，hash 模式的測試就完成了，關於 history 模式需要編寫的程式碼比較多，我這裡就不帶著大家一起來驗證了，因為他們兩個都是同一個世界同一個夢想的。
到此為止，我們就完成了初始化路由資訊的程式碼編寫，接下來我們下一篇的內容就是根據當前的路由地址，找到對應的元件，然後渲染到頁面上。
最後
