溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
組件系統是Vue的一個重要組成部分，它可以將一個復雜的頁面抽象分解成許多小型、獨立、可復用的組件，通過組合組件來組成應用程序，結合 vue-router 的路由功能將各個組件映射到相應的路由上，通過路由的變化來告訴Vue要在哪里渲染他們，實現各個組件、各個頁面之間的跳轉導航。
問題
使用 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-router 組件復用導致路由參數失效的問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
