前言

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

那么就會(huì)遇到幾個(gè)問題，就是怎么監(jiān)聽，怎么保存，我們先回到 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)前的路由地址，等等等等一系列信息，所以為了將來能夠注入這兩個(gè)對(duì)象，我這里單獨(dú)寫一個(gè)類來存儲(chǔ)這兩個(gè)對(duì)象相關(guān)的信息。

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

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

通過這個(gè)類，我們就可以保存當(dāng)前的路由地址，默認(rèn)等于 null，將來路由地址發(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 也就是路由模式來進(jìn)行走不同分支的邏輯代碼，如果是 hash 模式，那么我們就需要監(jiān)聽 hashchange 事件，如果是 history 模式，那么我們就需要監(jiān)聽 popstate 事件。

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

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

initDefault() {
    if (this.mode === 'hash') {
        // 1.判斷打開的界面有沒有hash, 如果沒有就跳轉(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.判斷打開的界面有沒有路徑, 如果沒有就跳轉(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è)試

代碼寫完了，我們來測(cè)試一下，先在 app.vue 中定義兩個(gè) a 標(biāo)簽 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 模式, 我們來測(cè)試第一步我們處理的邏輯，打開界面，看看有沒有 hash，如果沒有就跳轉(zhuǎn)到 #/，如果有就不用管了。

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

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

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

好了，hash 模式的測(cè)試就完成了，關(guān)于 history 模式需要編寫的代碼比較多，我這里就不帶著大家一起來驗(yàn)證了，因?yàn)樗麄儍蓚€(gè)都是同一個(gè)世界同一個(gè)夢(mèng)想的。

到此為止，我們就完成了初始化路由信息的代碼編寫，接下來我們下一篇的內(nèi)容就是根據(jù)當(dāng)前的路由地址，找到對(duì)應(yīng)的組件，然后渲染到頁面上。

到此這篇關(guān)于Vue Router初始化路由信息詳解的文章就介紹到這了,更多相關(guān)Vue Router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論