解決vue路由組件vue-router實(shí)例被復(fù)用問(wèn)題
最近在開(kāi)發(fā)過(guò)程中遇到如下問(wèn)題:
當(dāng)前路由是這樣的
http://127.0.0.1:3010/order?keywords=22
只改變keywords的值,路由不跳轉(zhuǎn)
http://127.0.0.1:3010/order?keywords=33338
造成這樣的原因如下圖所示:
參考文檔:https://router.vuejs.org/en/essentials/dynamic-matching.html
這種情況網(wǎng)上的解決方式:
使用vue-router
切換路由時(shí)會(huì)觸發(fā)組件樹(shù)的更新,根據(jù)定義的路由渲染一個(gè)新的組件樹(shù),大致的切換過(guò)程是這樣的:
- 停用并移除不需要的組件
- 驗(yàn)證切換的可行性
- 復(fù)用沒(méi)有進(jìn)行更新的組件
- 啟用并激活新的組件
那vue-router
是怎么判斷某一個(gè)組件可以復(fù)用的呢?我們看一下下面這條路由配置:
{ path: 'post/:postId', name: 'post', component: resolve => require(['./components/Post.vue'],resolve) }
這是通過(guò)文章ID加載對(duì)應(yīng)文章頁(yè)面的路由,第一次訪問(wèn)時(shí),Post.vue
這個(gè)組件會(huì)被渲染到組件樹(shù)中,mounted安裝組件時(shí)通過(guò)文章ID獲取文章內(nèi)容展示到頁(yè)面上,當(dāng)我們?cè)L問(wèn)另一篇文章時(shí),路由參數(shù):postId
發(fā)生改變,按照我們的預(yù)期應(yīng)該會(huì)展示新文章的內(nèi)容,但是事與愿違。
我們看到的還是之前的文章,雖然路由參數(shù)已發(fā)生更改,但是vue-router
會(huì)以為你訪問(wèn)的是Post.vue
這個(gè)組件,由于之前已經(jīng)渲染過(guò)該組件,所以會(huì)直接復(fù)用之前的組件,并且不會(huì)執(zhí)行組件中的任何操作包括mounted
之類的生命周期函數(shù)。
所以我們最終看到的還是原來(lái)組件的內(nèi)容。
那要怎么才能實(shí)現(xiàn)我們期望的效果呢?下面介紹一種有效的解決方法
解決方法
我們可以使用watch
偵聽(tīng)器來(lái)監(jiān)聽(tīng)路由的變化情況,根據(jù)路由參數(shù)的變化來(lái)響應(yīng)相應(yīng)的數(shù)據(jù),具體實(shí)現(xiàn)過(guò)程是這樣的:
定義數(shù)據(jù)獲取方法
首先定義一個(gè)獲取文章的方法,根據(jù)文章ID從后臺(tái)獲取對(duì)應(yīng)的文章信息。
methods: { getPost(postId) { this.$http.get(`/post/get_post/${postId}`).then((response) => { if(response.data.code === 0){ this.post = response.data.post; } }); } }
監(jiān)聽(tīng)路由
接著是在路由切換的時(shí)候判斷目標(biāo)組件是否是Post.vue
組件,這里可以根據(jù)定義的路由名稱name
實(shí)現(xiàn),如果是,我們就可以從路由信息中獲取目標(biāo)文章ID來(lái)更新組件內(nèi)容。
watch: { '$route' (to, from) { if(to.name === 'post'){ this.getPost(to.params.postId); } } }
組件初始化
這里需要注意的是,當(dāng)組件首次被掛載到組件樹(shù)上時(shí),對(duì)路由的監(jiān)聽(tīng)是無(wú)效的,這時(shí)我們需要在生命周期鉤子mounted
對(duì)組件進(jìn)行初始化工作:
mounted() { this.getPost(this.$route.params.postId); }
到此這篇關(guān)于解決vue路由組件vue-router實(shí)例被復(fù)用問(wèn)題的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
公司某項(xiàng)目需求在頁(yè)面顯示的組件是根據(jù)角色變化而變化的,怎么實(shí)現(xiàn)這個(gè)效果呢,下面小編給大家介紹下Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個(gè)使用Vue.js(opens?new?window)開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web(響應(yīng)式)、以及各種小程序(微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶)、快應(yīng)用等多個(gè)平臺(tái)2022-09-09Vue 頁(yè)面監(jiān)聽(tīng)用戶預(yù)覽時(shí)間功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 頁(yè)面如何監(jiān)聽(tīng)用戶預(yù)覽時(shí)間,首先需要借助vue頁(yè)面的生命周期函數(shù)mounted和destroyed,分別加入開(kāi)始計(jì)時(shí)和清除計(jì)時(shí)的邏輯,通過(guò)相關(guān)操作實(shí)現(xiàn)此功能,需要的朋友可以參考下2021-07-07vue.js實(shí)現(xiàn)左邊導(dǎo)航切換右邊內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)左邊導(dǎo)航切換右邊內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄(60s禁用倒計(jì)時(shí))
這篇文章主要介紹了Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄(60s禁用倒計(jì)時(shí)),幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-12-12vue通過(guò)elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們?cè)陂_(kāi)發(fā)中經(jīng)常會(huì)遇到通過(guò)點(diǎn)擊某個(gè)按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09