溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何解決Vue相同路由參數不同不會刷新的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
通常情況下我們喜歡設置keepAlive 包裹 router-view
<div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div>
同時在created 中觸發請求，在路由參數不同的情況下并不會執行對應的操作。
解決方法：
1、給 router-view 設置 key 屬性為路由的完整路徑
<keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive>
這種方法我覺得應該是一勞永逸的方法，可能對性能造成一定損耗。不適用于一個tab切換路由并加載列表的組件，會造成頁面白屏，dev模式不會自動刷新，是個坑
2、官方給出的方法是通過 watch 監聽路由變化，做判斷路由路徑然后調用響應的方法
watch: {
'$route' () {
if (this.$route.path === 'test') {
this.test();
}
}
}watch: {
'id': {
handler: 'test',
//調用方法
immediate: true,
//進入立即執行一次
}
},這兩種方法推薦第一種，第二種需要先對參數id進行賦值
3、通過組件導航守衛來設置對應的meta 屬性
beforeRouteEnter: (to, from, next) = > { // 寫在當前組件
to.meta.keepAlive = false
next()
},
beforeRouteLeave: (to, from, next) = > { //寫在前一個組件
to.meta.keepAlive = false
next()
},以上是“如何解決Vue相同路由參數不同不會刷新的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
