解決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:vue2中protoType更改為config.globalProperties問(wèn)題
這篇文章主要介紹了vue3:vue2中protoType更改為config.globalProperties問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用vue3+TS實(shí)現(xiàn)簡(jiǎn)易組件庫(kù)的全過(guò)程
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開(kāi)發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了如何使用vue3+TS實(shí)現(xiàn)簡(jiǎn)易組件庫(kù)的相關(guān)資料,需要的朋友可以參考下2022-03-03
使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例
下面小編就為大家?guī)?lái)一篇使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
本篇文章主要介紹了淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式，本文將詳細(xì)介紹在Vue應(yīng)用程序中實(shí)現(xiàn)AJAX的四個(gè)方法，有興趣的可以了解一下2017-08-08
本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
VUE axios發(fā)送跨域請(qǐng)求需要注意的問(wèn)題
本篇文章主要介紹了VUE axios發(fā)送跨域請(qǐng)求需要注意的問(wèn)題，在實(shí)際項(xiàng)目中前端使用到vue，后端使用php進(jìn)行開(kāi)發(fā)。前端使用axios請(qǐng)求請(qǐng)求遇到的問(wèn)題，有興趣的可以了解一下2017-07-07
Vue3使用vue-qrcode-reader實(shí)現(xiàn)掃碼綁定設(shè)備功能(推薦)
本文介紹了在Vue3中使用vue-qrcode-reader版本5.5.7來(lái)實(shí)現(xiàn)移動(dòng)端的掃碼綁定設(shè)備功能,用戶通過(guò)掃描二維碼自動(dòng)獲取設(shè)備序列號(hào),并填充到添加設(shè)備界面,完成設(shè)備綁定的全過(guò)程,包含ScanCode.vue和DeviceAdd.vue兩個(gè)主要界面的實(shí)現(xiàn)方式2024-10-10
Vue3使用defineAsyncComponent實(shí)現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過(guò)異步加載組件,可以減少初始加載時(shí)的資源體積,從而提升應(yīng)用的加載速度和用戶體驗(yàn),本文將詳細(xì)介紹如何使用 defineAsyncComponent 實(shí)現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03
Vue使用lodash進(jìn)行防抖節(jié)流的實(shí)現(xiàn)
本文主要介紹了Vue使用lodash進(jìn)行防抖節(jié)流的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04