通常情況下我們喜歡設置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()},

個人比較喜歡第一種方法

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。