詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問題
通常情況下我們喜歡設(shè)置keepAlive 包裹 router-view
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
同時(shí)在created 中觸發(fā)請(qǐng)求，在路由參數(shù)不同的情況下并不會(huì)執(zhí)行對(duì)應(yīng)的操作。
解決方法：
1、給 router-view 設(shè)置 key 屬性為路由的完整路徑
<keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive>
這種方法我覺得應(yīng)該是一勞永逸的方法，可能對(duì)性能造成一定損耗。不適用于一個(gè)tab切換路由并加載列表的組件，會(huì)造成頁面白屏，dev模式不會(huì)自動(dòng)刷新，是個(gè)坑
2、官方給出的方法是通過 watch 監(jiān)聽路由變化，做判斷路由路徑然后調(diào)用響應(yīng)的方法
watch: {
'$route' () {
if (this.$route.path === 'test') {
this.test();
}
}
}
watch: {
'id': {
handler: 'test',
//調(diào)用方法
immediate: true,
//進(jìn)入立即執(zhí)行一次
}
},
這兩種方法推薦第一種，第二種需要先對(duì)參數(shù)id進(jìn)行賦值
3、通過組件導(dǎo)航守衛(wèi)來設(shè)置對(duì)應(yīng)的meta 屬性
beforeRouteEnter: (to, from, next) = > { // 寫在當(dāng)前組件
to.meta.keepAlive = false
next()
},
beforeRouteLeave: (to, from, next) = > { //寫在前一個(gè)組件
to.meta.keepAlive = false
next()
},
個(gè)人比較喜歡第一種方法
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中防抖/節(jié)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue router-view和router-link的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue router-view和router-link的實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
詳解Vue iview IE瀏覽器不兼容報(bào)錯(cuò)（Iview Bable polyfill）
這篇文章主要介紹了Vue iview IE瀏覽器不兼容報(bào)錯(cuò)的決絕方法，由于Iview編譯使用到了es6的一些新特性，但是在IE中不支持ES6的新特性，本文就介紹一下如何解決這些問題2019-01-01
這篇文章主要為大家詳細(xì)介紹了Vue.js路由vue-router使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
使用vue3+TS實(shí)現(xiàn)簡易組件庫的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了如何使用vue3+TS實(shí)現(xiàn)簡易組件庫的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時(shí)更新列表功能
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時(shí)更新列表功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下2017-07-07
詳解vue3+element-plus實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)路由動(dòng)態(tài)按鈕(前后端分離)
本文需要使用axios,路由,pinia,安裝element-plus,并且本文vue3是基于js而非ts的,這些環(huán)境如何搭建不做描述,需要讀者自己完成,感興趣的朋友跟隨小編一起看看吧2023-11-11
這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02