組件系統(tǒng)是Vue的一個重要組成部分，它可以將一個復(fù)雜的頁面抽象分解成許多小型、獨立、可復(fù)用的組件，通過組合組件來組成應(yīng)用程序，結(jié)合 vue-router 的路由功能將各個組件映射到相應(yīng)的路由上，通過路由的變化來告訴Vue要在哪里渲染他們，實現(xiàn)各個組件、各個頁面之間的跳轉(zhuǎn)導(dǎo)航。

問題

使用 vue-router 切換路由時會觸發(fā)組件樹的更新，根據(jù)定義的路由渲染一個新的組件樹，大致的切換過程是這樣的：

1. 停用并移除不需要的組件
2. 驗證切換的可行性
3. 復(fù)用沒有進行更新的組件
4. 啟用并激活新的組件

具體路由切換控制流程請參考官方文檔：切換控制流水線

那 vue-router 是怎么判斷某一個組件可以復(fù)用的呢？ 我們看一下下面這條路由配置：

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

這是通過文章ID加載對應(yīng)文章頁面的路由，第一次訪問時， Post.vue 這個組件會被渲染到組件樹中，mounted安裝組件時通過文章ID獲取文章內(nèi)容展示到頁面上，當(dāng)我們訪問另一篇文章時，路由參數(shù) :postId 發(fā)生改變，按照我們的預(yù)期應(yīng)該會展示新文章的內(nèi)容，但是事與愿違。

我們看到的還是之前的文章，雖然路由參數(shù)已發(fā)生更改，但是 vue-router 會以為你訪問的是 Post.vue 這個組件，由于之前已經(jīng)渲染過該組件，所以會直接復(fù)用之前的組件，并且 不會 執(zhí)行組件中的任何操作包括 mounted 之類的生命周期函數(shù)。

所以我們最終看到的還是原來組件的內(nèi)容。

那要怎么才能實現(xiàn)我們期望的效果呢？下面介紹一種有效的解決方法

解決方法

我們可以使用 watch 偵聽器來監(jiān)聽路由的變化情況，根據(jù)路由參數(shù)的變化來響應(yīng)相應(yīng)的數(shù)據(jù)，具體實現(xiàn)過程是這樣的：

定義數(shù)據(jù)獲取方法

首先定義一個獲取文章的方法，根據(jù)文章ID從后臺獲取對應(yīng)的文章信息。

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

監(jiān)聽路由

接著是在路由切換的時候判斷目標(biāo)組件是否是 Post.vue 組件，這里可以根據(jù)定義的路由名稱 name 實現(xiàn)，如果是，我們就可以從路由信息中獲取目標(biāo)文章ID來更新組件內(nèi)容。

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

組件初始化

這里需要注意的是， 當(dāng)組件首次被掛載到組件樹上時，對路由的監(jiān)聽是無效的 ，這時我們需要在生命周期鉤子 mounted 對組件進行初始化工作：

mounted() {
  this.getPost(this.$route.params.postId);
}

寫在最后

通過上面的方法就可以實現(xiàn)組件內(nèi)容隨路由參數(shù)的變化而更新了，有效解決了 vue-router 組件復(fù)用導(dǎo)致路由參數(shù)失效的問題。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論