有關vue-router元件有哪些複用問題？

本篇文章主要介紹了vue-router 組件復用問題詳解，現在分享給大家，也給大家做個參考。

元件系統是Vue的一個重要組成部分，它可以將一個複雜的頁面抽象分解成許多小型、獨立、可復用的元件，透過組合元件來組成應用程序，結合vue-router 的路由功能將各個元件映射到對應的路由上，透過路由的變化來告訴Vue要在哪裡渲染他們，實現各個元件、各個頁面之間的跳轉導航。

問題

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

1. 停用並移除不需要的元件

2. #驗證切換的可行性

3. ##複用沒有進行更新的元件

4. 啟用並啟動新的元件

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

那vue-router 是怎麼判斷某一個元件可以重複使用的呢？我們來看看下面這條路由配置：

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

這是透過文章ID載入對應文章頁面的路由，第一次造訪時， Post.vue 這個元件會被渲染到元件樹中，mounted安裝元件時透過文章ID取得文章內容展示到頁面上，當我們訪問另一篇文章時，路由參數:postId 發生改變，按照我們的預期應該會展示新文章的內容，但是事與願違。

我們看到的還是之前的文章，雖然路由參數已發生更改，但是vue-router 會以為你訪問的是Post.vue 這個元件，由於之前已經渲染過該元件，所以會直接復用之前的元件，並且不會執行組件中的任何操作包括mounted 之類的生命週期函數。

所以我們最後看到的還是原來元件的內容。

那要怎麼才能實現我們期望的效果呢？以下介紹一個有效的解決方法

解決方法

我們可以使用watch 偵聽器來監聽路由的變化情況，並根據路由參數的變化來回應相應的數據，具體實現過程是這樣的：

定義數據獲取方法

首先定義一個獲取文章的方法，根據文章ID從後台獲取對應的文章信息。

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

監聽路由

接著是在路由切換的時候判斷目標元件是否是Post.vue 元件，這裡可以根據定義的路由名稱name 實現，如果是，我們就可以從路由資訊中取得目標文章ID來更新元件內容。

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

元件初始化

這裡要注意的是， 當元件首次被掛載到元件樹上時，對路由的監聽是無效的，這時我們需要在生命週期鉤子mounted 對元件進行初始化工作：

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JavaScript中如何計算多邊形質心

在微信小程式中如何使用switch開關選擇器

詳細解讀Angular有關報錯404問題

#在微信小程式中如何使用slider元件

#在vue中如何實現記住密碼到cookie上

AngularJS重要版本更新

在微信小程式中如何使用progress元件

以上是有關vue-router元件有哪些複用問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！