vue路由組件vue-router實例被復用問題怎么解決

本文小編為大家詳細介紹“vue路由組件vue-router實例被復用問題怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue路由組件vue-router實例被復用問題怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

當前路由是這樣的

http://127.0.0.1:3010/order?keywords=22

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

http://127.0.0.1:3010/order?keywords=33338

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

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

使用vue-router切換路由時會觸發組件樹的更新，根據定義的路由渲染一個新的組件樹，大致的切換過程是這樣的： 
- 停用并移除不需要的組件 
- 驗證切換的可行性 
- 復用沒有進行更新的組件 
- 啟用并激活新的組件

那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);
}

讀到這里，這篇“vue路由組件vue-router實例被復用問題怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。