前言

經過上一節課的學習，我們已經完成了提取我們想要的路由信息數據格式，提取完畢了之后，接下來我們該干什么，接下來需要做的步驟就是監聽路由的變化，保存當前的路由。

那么就會遇到幾個問題，就是怎么監聽，怎么保存，我們先回到 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 模式需要編寫的代碼比較多，我這里就不帶著大家一起來驗證了，因為他們兩個都是同一個世界同一個夢想的。

到此為止，我們就完成了初始化路由信息的代碼編寫，接下來我們下一篇的內容就是根據當前的路由地址，找到對應的組件，然后渲染到頁面上。

最后

總結

以上是生活随笔為你收集整理的手撕Vue-Router-初始化路由信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。