深入了解vue-router原理并實現(xiàn)一個小demo

更新時間：2022年03月03日 17:15:43 作者：海綿泡泡

這篇文章主要為大家詳細(xì)介紹了vue-router原理并實現(xiàn)一個小demo，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

插件編寫的基本方法

推薦大家先看看官方給出的插件使用和開發(fā)方法

https://vuejs.bootcss.com/guide/plugins.html?

需求分析

我們先看看vue-router的使用步驟

1.use

Vue.use(VueRouter)

注意??：

Vue.use()主要是調(diào)用插件內(nèi)部的install方法，并將Vue實例作為參數(shù)傳入?

2.new 一個router實例

const router = new VueRouter({
  // 實例化router傳入的參數(shù)
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

3.new Vue() ，把實例放在vue的配置項里面

new Vue({
  router, // 注意router的實例也往里傳
  render: h => h(App)
}).$mount('#app')

4.使用路由組件<router-view/>、<router-link></router-link>或者在組件中使用this.$router

由此我們看看vue-router內(nèi)部做了什么？

將$router掛載到全局上實現(xiàn)并聲明了兩個組件：<router-view/>、<router-link></router-link>?

實現(xiàn)思路

首先我們看看如何將$router掛載到組件上?

let Vue; // 保存vue的構(gòu)造函數(shù)，避免打包將其打進去
VueRouter.install = function (_Vue) {
  Vue = _Vue;
  console.log("options", Vue.$options);
  Vue.mixin({
    beforeCreate() {
      console.log("inner", this);
      console.log(" this.$options.router", this.$options.router);
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router;
      }
    },
  });
  console.log("end");
};

在這里插入圖片描述

可以看到：

1、第一次執(zhí)行的時候，即在Vue.use(Router)時，還沒有實例化vue（因為Vue.use()發(fā)生在 new Vue()之前），所以Vue.$option本身是拿不到的（ps: option就是new Vue()時傳入的參數(shù)，router也往里面?zhèn)鳎?，此時既然拿不到router的實例，所以不能直接在install方法里面掛載；?

?2、我們可以在use的時候做一個全局混入，在合適的時間點，獲取到Vue根實例配置項中的router實例，執(zhí)行掛載。緊接著在new Vue()根實例創(chuàng)建的時候，因為注入了router實例，所以再執(zhí)行全局混入(mixin)中的生命周期時，這個時候根實例的配置項this.$options已經(jīng)包含了router實例，可以此時把router掛載到Vue的原型上。之后所有Vue實例擴展來的VueCompont都可以通過this.$router訪問到這個屬性

?如何實現(xiàn)那兩個路由組件

先看看路由組件如何使用

<div id="app">
  <div id="nav">
    <!-- a標(biāo)簽控制跳轉(zhuǎn) -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <!-- 路由出口 -->
  <router-view />
</div>

由上面可以看出，點擊router-link，就相當(dāng)于點了a標(biāo)簽，然后a標(biāo)簽的href屬性控制頁面路由發(fā)生了變化；監(jiān)聽路由變化，然后仔router-view里面輸出不同的模板；?

先來看看router-link

class VueRouter {
  constructor(options) {
    // 接受傳入的參數(shù)
    this.$options = options;
    const initial = "/";
    // 將current變成響應(yīng)式數(shù)據(jù)，
    //這樣在hashchange的回掉中修改curent時，
    //用到current的router-view的render函數(shù)就會重新渲染
    Vue.util.defineReactive(this, "current", initial);
    // 監(jiān)聽路由變化
    window.addEventListener("hashchange", () => {
      // 獲取當(dāng)前url中的hash
      this.current = window.location.hash.slice(1);
    });
  }
}

VueRouter.install = function (_Vue) {
  Vue = _Vue;
  Vue.component("router-view", {
    render(h) {
      // 獲取當(dāng)前路由所對應(yīng)的組件，然后把它渲染出來
      const { current, $options } = this.$router;
      // 這里要注意 我們傳進來的routes是一個路由表，如下圖一
      // 所以這里我們是找出匹配到當(dāng)前current路由的項，然后直接渲染組件
      const route = $options.routes.find((item) => {
        return item.path === current;
      });
      let component = route ? route.component : null;

      return h(component);
    },
  });
}

?再來看看router-view

class VueRouter {
  constructor(options) {
    // 接受傳入的參數(shù)
    this.$options = options;
    const initial = "/";
    // 將current變成響應(yīng)式數(shù)據(jù)，
    //這樣在hashchange的回掉中修改curent時，
    //用到current的router-view的render函數(shù)就會重新渲染
    Vue.util.defineReactive(this, "current", initial);
    // 監(jiān)聽路由變化
    window.addEventListener("hashchange", () => {
      // 獲取當(dāng)前url中的hash
      this.current = window.location.hash.slice(1);
    });
  }
}

VueRouter.install = function (_Vue) {
  Vue = _Vue;
  Vue.component("router-view", {
    render(h) {
      // 獲取當(dāng)前路由所對應(yīng)的組件，然后把它渲染出來
      const { current, $options } = this.$router;
      // 這里要注意 我們傳進來的routes是一個路由表，如下圖一
      // 所以這里我們是找出匹配到當(dāng)前current路由的項，然后直接渲染組件
      const route = $options.routes.find((item) => {
        return item.path === current;
      });
      let component = route ? route.component : null;

      return h(component);
    },
  });
}

圖一

在這里插入圖片描述

完整demo代碼

// 我們要實現(xiàn)什么
// 1、插件
// 2、兩個組件

// 保存vue的構(gòu)造函數(shù)，避免打包將其打進去
let Vue;
class VueRouter {
  constructor(options) {
    this.$options = options;
    const initial = "/";
    Vue.util.defineReactive(this, "current", initial);
    this.current = "/";
    window.addEventListener("hashchange", () => {
      // 獲取當(dāng)前url中的hash
      this.current = window.location.hash.slice(1);
    });
  }
}

// 參數(shù)1在Vue.use()調(diào)用時傳進來，
VueRouter.install = function (_Vue) {
  Vue = _Vue;
  console.log("options", this);

  // 全局混入
  // 目的：延遲下面的邏輯 到 router創(chuàng)建完畢并且附加到選項上時才執(zhí)行
  Vue.mixin({
    // 在每個組件創(chuàng)建實例時都會執(zhí)行
    beforeCreate() {
      // this.$options.router ；即new Vue時放進去的router實例
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router;
      }
    },
  });

  // 注冊并且實現(xiàn)兩個組件
  Vue.component("router-link", {
    props: {
      to: {
        required: true,
      },
    },
    render(h) {
      return h(
        "a",
        {
          attrs: { href: "#" + this.to },
        },
        this.$slots.default
      );
    },
  });
  Vue.component("router-view", {
    render(h) {
      // 獲取當(dāng)前路由所對應(yīng)的組件，然后把它渲染出來
      const { current, $options } = this.$router;
      const route = $options.routes.find((item) => {
        return item.path === current;
      });
      let component = route ? route.component : null;

      return h(component);
    },
  });
};

export default VueRouter;