詳解解決Vue相同路由參數(shù)不同不會刷新的問題
更新時間：2018年10月12日 15:15:30 作者：bug開發(fā)
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
通常情況下我們喜歡設(shè)置keepAlive 包裹 router-view
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
同時在created 中觸發(fā)請求，在路由參數(shù)不同的情況下并不會執(zhí)行對應(yīng)的操作。
解決方法：
1、給 router-view 設(shè)置 key 屬性為路由的完整路徑
<keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive>
這種方法我覺得應(yīng)該是一勞永逸的方法，可能對性能造成一定損耗。不適用于一個tab切換路由并加載列表的組件，會造成頁面白屏，dev模式不會自動刷新，是個坑
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í)行一次
}
},
這兩種方法推薦第一種，第二種需要先對參數(shù)id進(jìn)行賦值
3、通過組件導(dǎo)航守衛(wèi)來設(shè)置對應(yīng)的meta 屬性
beforeRouteEnter: (to, from, next) = > { // 寫在當(dāng)前組件
to.meta.keepAlive = false
next()
},
beforeRouteLeave: (to, from, next) = > { //寫在前一個組件
to.meta.keepAlive = false
next()
},
個人比較喜歡第一種方法
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vuex操作state對象的實例代碼,本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中echarts@4.9版本地圖的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
下面小編就為大家分享一篇vue.js select下拉框綁定和取值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue-cli4使用全局less文件中的變量配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue之多項目|多工程共用相同組件的思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等屬性的縮寫,本文我用動態(tài)綁定background-image來舉例,感興趣的朋友跟隨小編一起看看吧2023-10-10
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了TypeScript在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03