vue router 元件例項被復用問題

最近在開發過程中遇到如下問題:

當前路由是這樣的

只改變keywords的值，路由不跳轉

造成這樣的原因如下圖所示：

參考文件:

這種情況網上的解決方式:

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

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

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

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

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

首先定義乙個獲取文章的方法，根據文章id從後台獲取對應的文章資訊。

methods: `).then((response) => 
});}
}

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

watch: }}

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

mounted()