解決vue路由組件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); }
到此這篇關於解決vue路由組件vue-router實例被復用問題的文章就介紹到這瞭。希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue中的動態路由匹配路由問題
- Vue路由this.route.push跳轉頁面不刷新的解決方案
- vue-router傳參的4種方式超詳細講解
- vue如何通過點擊事件實現頁面跳轉詳解
- vue 頁面跳轉的實現方式