快捷導(dǎo)航

Vue Router初始化路由信息詳解

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

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

前言

經(jīng)過(guò)上一節(jié)課的學(xué)習(xí)，我們已經(jīng)完成了提取我們想要的路由信息數(shù)據(jù)格式，提取完畢了之后，接下來(lái)我們?cè)摳墒裁?，接下?lái)需要做的步驟就是監(jiān)聽(tīng)路由的變化，保存當(dāng)前的路由。

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

其實(shí)我們?cè)谑褂?VueRouter 的時(shí)候，只要你注冊(cè)了 VueRouter 之后，他會(huì)在每一個(gè) Vue 實(shí)例中都添加兩個(gè)屬性，一個(gè)是，一個(gè)是，一個(gè)是router，一個(gè)是route，這兩個(gè)屬性是什么呢？

$router

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

$route

$route 其實(shí)對(duì)應(yīng)著就是一個(gè)普通的對(duì)象，這個(gè)對(duì)象就保存了當(dāng)前的路由地址，等等等等一系列信息，所以為了將來(lái)能夠注入這兩個(gè)對(duì)象，我這里單獨(dú)寫(xiě)一個(gè)類來(lái)存儲(chǔ)這兩個(gè)對(duì)象相關(guān)的信息。

代碼實(shí)現(xiàn)

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

通過(guò)這個(gè)類，我們就可以保存當(dāng)前的路由地址，默認(rèn)等于 null，將來(lái)路由地址發(fā)生變化的時(shí)候，我們就可以修改這個(gè)值。

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

首先定義 NueRouterInfo 的實(shí)例:

this.routerInfo = new NueRouterInfo();

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

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

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

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

initDefault() {
    if (this.mode === 'hash') {
        // 1.判斷打開(kāi)的界面有沒(méi)有hash, 如果沒(méi)有就跳轉(zhuǎn)到#/
        if (!location.hash) {
            location.hash = '/';
        }
        // 2.加載完成之后和hash發(fā)生變化之后都需要保存當(dāng)前的地址
        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.判斷打開(kāi)的界面有沒(méi)有路徑, 如果沒(méi)有就跳轉(zhuǎn)到/
        if (!location.pathname) {
            location.pathname = '/';
        }
        // 2.加載完成之后和history發(fā)生變化之后都需要保存當(dāng)前的地址
        window.addEventListener('load', () => {
            this.routerInfo.currentPath = location.pathname;
        });
        window.addEventListener('popstate', () => {
            this.routerInfo.currentPath = location.pathname;
            console.log(this.routerInfo);
        });
    }
}

測(cè)試

代碼寫(xiě)完了，我們來(lái)測(cè)試一下，先在 app.vue 中定義兩個(gè) a 標(biāo)簽 href 是 hash 模式代碼如下：

<template>
  <div id="app">
    <a href="#/home" rel="external nofollow" >首頁(yè)</a>
    <a href="#/about" rel="external nofollow" >關(guān)于</a>
  </div>
</template>
<style>
</style>

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

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

然后我們?cè)僭L問(wèn)：http://localhost:8080/#/home ，然后我們看看界面的地址欄，發(fā)現(xiàn)有 hash，就不用管了:

接下來(lái)我們測(cè)試第二步，監(jiān)聽(tīng) hashchange 事件，我們?cè)?hashchange 事件中打印了 NueRouterInfo 的實(shí)例，看看有沒(méi)有保存當(dāng)前的路由地址，我們分別點(diǎn)擊首頁(yè)和關(guān)于，打印結(jié)果如下：