當前位置：首頁 > 前端技术 > vue >内容正文

vue

手撕Vue-Router-知识储备

發布時間：2023/11/20 vue 62 coder

生活随笔收集整理的這篇文章主要介紹了手撕Vue-Router-知识储备小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

本文是手寫Vue-Router的第一篇，主要是對Vue-Router的知識儲備，為后面的手寫做準備。

那么 VueRouter 怎么實現呢？要想實現 VueRouter，首先要知道 VueRouter 它的本質是什么。

VueRouter 的本質

VueRoute 的本質是什么？VueRouter 的本質就是根據 "不同的 hash 值" 或者 "不同的路徑地址", 將不同的內容渲染到 router-view 中。

再過去，我學習 VueRouter 的時候，知道 VueRouter 有兩種模式，一種是 hash 模式，一種是 history 模式。那么這兩種模式有什么區別呢？

hash 模式和 history 模式的區別

如果是 history 模式，那么我們的路徑就是這樣的：http://localhost:8080/home，如果是 hash 模式，那么我們的路徑就是這樣的：http://localhost:8080/#/home。

了解了這些知識之后，所以實現 VueRouter 的核心關鍵點就在于如何監聽 'hash' 或 '路徑' 的變化, 再將不同的內容寫到 router-view 中。

那么在實現 VueRouter 之前呢，我在給大家補充一下，如何監聽 'hash' 或 '路徑' 的變化。

如何監聽 hash 或路徑的變化

hash

首先我新建了一個 test.html 文件，然后在里面寫了一個 div，然后給這個 div 設置了一個 id，id 的值為 html。

并且在頁面當中添加了兩個 a 標簽，兩個 a 標簽的 href 分別跳轉地址為，一個是 #/home，一個是 #/about。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#/home">首頁</a>
<a href="#/about">關于</a>
<div id="html"></div>
</body>
</html>

基本的結構我們搭建完畢，好了接下來我們怎么監聽 hash 的變化呢？也非常的簡單，其實在我們原生的 JS 當中，有一個 hashchange 事件，這個事件就是用來監聽 hash 變化的（專門用于監聽 hash 變化的）。

那么知道了監聽 hash 變化的事件之后，我們怎么使用呢？我們可以給 window 綁定一個 hashchange 事件，然后在這個事件當中，有一個回調函數，主要 hash 變化之后，我們就可以在這個回調函數當中，獲取到當前的 hash 值。

那么怎么驗證它會執行這個回調函數呢，我們可以在這個回調函數當中，打印一下當前的 hash 值。

<script>
    window.addEventListener('hashchange', () => {
        console.log('當前的hash值發生了變化');
    });
</script>

好了，我們打開瀏覽器，然后點擊首頁，我們可以看到控制臺打印了一句話，說明我們的 hash 值發生了變化，看到這一點就可以驗證我的一個說法。

接下來我們要做的就是將內容渲染到 div 中，我們先簡單的來將 hash 值寫入到 div 中。

window.addEventListener('hashchange', () => {
    const currentHash = location.hash.slice(1);

    document.querySelector('#html').innerHTML = currentHash;
});

我們打開瀏覽器，點擊首頁，我們可以看到 div 中的內容變成了 home，點擊關于，我們可以看到 div 中的內容變成了 about。

將來我們是不是根據這個獲取到對應的組件，然后將組件渲染到 div（某一個容器當中）中就可以了。

好了到這里我們的監聽 hash 就可以，可以了之后還沒完，可以了之后有沒有這么一種情況，就是我們第一次打開頁面的時候我們地址上面是沒有 hash 值的，還有可能就是我們地址欄是有 hash 值的這種情況，是不是有可能，對吧，我們先來看看我們第一次打開頁面的時候，有 hash 值我們的容器顯示的是什么。

我們可以看到我們的容器顯示的是空的，那么我們怎么解決這個問題呢？我們可以在頁面加載的時候，手動的觸發一次 hashchange 事件，這樣我們就可以在頁面加載的時候，將內容渲染到 div 中。

首先我們在 window 上面綁定一個 load 事件，然后在這個事件當中，我們手動的觸發一次 hashchange 事件。

window.addEventListener('load', () => {
    const currentHash = location.hash.slice(1);
    document.querySelector('#html').innerHTML = currentHash;
});

我們打開瀏覽器，我們可以看到我們的容器當中顯示的是 home，這樣我們就解決了第一次打開頁面的時候，我們的容器顯示的是空的這個問題。

路徑

到此為止，我們就可以監聽 hash 的變化了，那么我們怎么監聽路徑的變化呢？我們可以使用 history 的 pushState 方法，這個方法可以改變路徑，然后我們就可以監聽路徑的變化了。

在看路徑地址之前，我們先將基本的代碼頁面結構搭建一下，路徑與之前的 hash 是不一樣的，所以我們這里的 a 標簽就不能使用 href 屬性了，路徑我們可以給 a 標簽綁定一個事件，綁定一個方法然后在這個方法當中來改變路徑。

頁面樣式的基本結構代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a onclick="go('/home')">首頁</a>
<a onclick="go('/about')">關于</a>
<div id="html"></div>
<script>
    function go(path) {
    }
</script>
</body>
</html>

定義了一個 go 方法，接收一個參數 path，接下來要做的事情就是根據這個 path 來改變路徑，這個我們要怎么實現呢？這里我們可以借助一個 history 對象，在 history 對象當中有一個 pushState 方法，這個方法接收三個參數，第一個參數是 state，第二個參數是 title，第三個參數是 url。

pushState 方法參數：

state：一個與指定網址相關的狀態對象，popstate 事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填 null。
title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填 null。
url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

那么我們怎么使用呢？我們可以在 go 方法當中，調用 pushState 方法，然后將 path 傳入到 pushState 方法當中，這樣我們就可以改變路徑了。

history.pushState(null, null, path);

好了，我們打開瀏覽器，點擊首頁，我們可以看到我們的路徑變成了 http://localhost:8080/home，點擊關于，我們可以看到我們的路徑變成了 http://localhost:8080/about。

沒問題之后，我們再將內容渲染到 div 中，我們可以在 go 方法當中，獲取到當前的路徑，然后將路徑寫入到 div 中。

document.querySelector('#html').innerHTML = path;

我們打開瀏覽器，點擊首頁，我們可以看到我們的容器當中顯示的是 home，點擊關于，我們可以看到我們的容器當中顯示的是 about。

到此為止，我們就可以監聽路徑的變化了，好了知道這些內容之后，還有一個注意點需要給大家說一下：

注意點

我們先基于 IDEA 運行我們的項目，然后，點擊一下首頁這個時候我們的路徑與容器內容都是 /home，好，我們這個時候將地址復制一下，例如現在路徑已經變為了 http://localhost:63342/home ，我們在點擊一下關于，我們可以看到我們的路徑變為了 http://localhost:63342/about, 好，這個時候我們的關鍵點就要來了：

正如上圖所示，我們的路徑變為了 http://localhost:63342/home, 但是容器的內容還是 about，這是為什么呢？所以說這個東西我們也需要進行同步一下，那么我們手動添加了路徑那么它怎么知道我們有沒有前進與后退呢？非常簡單，其實在我們的原生 JS 當中，又有一個事件，這個事件就是 popstate 事件，通過這個事件，我們就可以監聽到前進與后退的點擊，通過這個事件監聽了前進與后退的點擊之后，它會執行一個回調函數，我們在這個回調函數當中，就可以處理之前的問題了。

更改我們的代碼，我們可以在 window 上面綁定一個 popstate 事件，然后在這個事件當中，我們可以獲取到當前的路徑，然后將路徑寫入到 div 中。

window.addEventListener('popstate', () => {
    document.querySelector('#html').innerHTML = location.pathname;
});

測試注意點

我們打開瀏覽器，點擊首頁，我們可以看到我們的容器當中顯示的是 home，點擊關于，我們可以看到我們的容器當中顯示的是 about，好，這個時候我們的關鍵點就要來了，我們點擊一下瀏覽器的前進與后退，我們可以看到我們的容器當中顯示的是 home 與 about，這樣我們就解決了這個問題。

總結

到此為止，我們了解了如何監聽 hash 與路徑的變化，并且了解到了如何監聽前進與后退的點擊，hash 與路徑的變化。

本篇文章就到這里，感謝大家的閱讀，如果有什么不足的地方，歡迎大家指出，我會及時的進行修改。

總結

以上是生活随笔為你收集整理的手撕Vue-Router-知识储备的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：大白话说Python+Flask入门（二
下一篇：在Vue3中使用Element-Plus