vue-router 組件實例被複用問題

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

當前路由是這樣的

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

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

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

 

 

 

形成這樣的緣由以下圖所示：

 參考文檔: https://router.vuejs.org/en/essentials/dynamic-matching.html

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

使用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);
}