Vue Router初始化路由信息詳解

更新時間：2023年11月22日 10:30:13 作者：BNTang

這篇文章主要為大家詳細介紹了Vue Router初始化路由信息的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解一下

前言

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

那么就會遇到幾個問題，就是怎么監(jiān)聽，怎么保存，我們先回到 VueRouter 的官方文檔，點擊右上角的 API 參考，然后拖動到底部，在底部找到組件注入，當中的注入的屬性：

其實我們在使用 VueRouter 的時候，只要你注冊了 VueRouter 之后，他會在每一個 Vue 實例中都添加兩個屬性，一個是，一個是，一個是router，一個是route，這兩個屬性是什么呢？

$router

其實對應(yīng)著就是我們自定義的 NueRouter 對象。

$route

$route 其實對應(yīng)著就是一個普通的對象，這個對象就保存了當前的路由地址，等等等等一系列信息，所以為了將來能夠注入這兩個對象，我這里單獨寫一個類來存儲這兩個對象相關(guān)的信息。

代碼實現(xiàn)

class NueRouterInfo {
    constructor() {
        this.currentPath = null;
    }
}

通過這個類，我們就可以保存當前的路由地址，默認等于 null，將來路由地址發(fā)生變化的時候，我們就可以修改這個值。

定義好了這個類我們是需要使用這個類，所以我們在哪里進行使用呢，我們在 NueRouter 類中進行使用，我們在 NueRouter 類中定義一個屬性，這個屬性就是 NueRouterInfo 的實例，然后在 NueRouter 的構(gòu)造函數(shù)中進行初始化路由信息。

首先定義 NueRouterInfo 的實例:

this.routerInfo = new NueRouterInfo();

然后在 NueRouter 的構(gòu)造函數(shù)中進行初始化路由信息，我這里定義一個 initDefault 方法，然后在這個方法中進行初始化路由信息，這個方法是在 NueRouter 的構(gòu)造函數(shù)中進行調(diào)用的。

在 initDefault 方法中，首先根據(jù)當前的 mode 也就是路由模式來進行走不同分支的邏輯代碼，如果是 hash 模式，那么我們就需要監(jiān)聽 hashchange 事件，如果是 history 模式，那么我們就需要監(jiān)聽 popstate 事件。

這是其中的一步，我們的第一步其實并不是監(jiān)聽，首先要處理的就是，打開的界面先判斷 mode 模式如果是 hash，看看界面有沒有 hash，如果沒有就跳轉(zhuǎn)到 #/，如果有就不用管了，如果是 history 模式，那么就看看界面有沒有 history，如果沒有就跳轉(zhuǎn)到 /，如果有就不用管了。

第二步才是監(jiān)聽，監(jiān)聽的時候，我們需要將當前的路由地址保存到 NueRouterInfo 的實例中，好了，我們來看看代碼怎么寫。

initDefault() {
    if (this.mode === 'hash') {
        // 1.判斷打開的界面有沒有hash, 如果沒有就跳轉(zhuǎn)到#/
        if (!location.hash) {
            location.hash = '/';
        }
        // 2.加載完成之后和hash發(fā)生變化之后都需要保存當前的地址
        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.判斷打開的界面有沒有路徑, 如果沒有就跳轉(zhuǎn)到/
        if (!location.pathname) {
            location.pathname = '/';
        }
        // 2.加載完成之后和history發(fā)生變化之后都需要保存當前的地址
        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" rel="external nofollow" >首頁</a>
    <a href="#/about" rel="external nofollow" >關(guān)于</a>
  </div>
</template>
<style>
</style>

然后在更改一下 NueRouter 的傳參，將 mode 改成 hash 模式, 我們來測試第一步我們處理的邏輯，打開界面，看看有沒有 hash，如果沒有就跳轉(zhuǎn)到 #/，如果有就不用管了。

首先訪問：http://localhost:8080/ ，然后我們看看界面的地址欄，發(fā)現(xiàn)沒有 hash，默認就會跳轉(zhuǎn)到 #/: