當(dāng)多個路由地址對應(yīng)同一組件時,切換路由組件不刷新的問題

在vue官方文檔中進行了如下描述:

當(dāng)使用路由參數(shù)時,例如從?/user/foo?導(dǎo)航到?/user/bar,原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件,比起銷毀再創(chuàng)建,復(fù)用則顯得更加高效。不過,這也意味著組件的生命周期鉤子不會再被調(diào)用。? ? ? ? ? ?

解釋一下:當(dāng)我們使用動態(tài)路由或者在路由上拼接參數(shù)時,進行頁面組件跳轉(zhuǎn),如果前后跳轉(zhuǎn)都使用了同一個組件,這就導(dǎo)致我們后面的路由跳轉(zhuǎn)會使用前一次組件實例,因此組件不會重新渲染加載

當(dāng)我們想傳遞參數(shù)后,組件重新渲染組件實例,可以使用vue官方文檔提供的方案:

復(fù)用組件時,想對路由參數(shù)的變化作出響應(yīng)的話,你可以簡單地 watch (監(jiān)測變化)?$route?對象

const User = {

????template: '...',

????watch: {

????????'$route' (to, from) {

????????????// 對路由變化作出響應(yīng)...

? ? ? ? ? ? }

? ? ? ?}

}

如果我們對"路由變化作出響應(yīng)是"==============>刷新當(dāng)前組件的話

可以使用:this.$router.go(0)? 來刷新當(dāng)前組件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容