在router入口頁面加上 keepAlive: true // 需要被快取 false則不需要

 {
  path: 'fundProListG',component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'],resolve),title: '基金首頁',redirect: 'fundProListG/fundProListG',meta: {
  keepAlive: false // 不需要被快取
  },children: [{
  path: 'fundProListG',component: resolve => require(['@/pages/product/fundPros/fundProListG.vue'],meta: {
  keepAlive: true // 需要被快取
  }
  },{
  path: 'fungAdm',component: resolve => require(['@/pages/product/fundPros/fungAdm.vue'],meta: {
  keepAlive: true // 需要被快取
  }
  }]
 },

App.vue (你在哪寫的那個<router-view ></router-view>標籤就在哪改動)

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

當點關閉標籤的時候如果不想當前頁面快取 加上

接著遇到了第一次快取第二次改為false後開啟不快取了 在關閉標籤頁面 加上這個

補充知識：解決通過vue-router開啟tab頁，下次進入還是上次history快取的介面狀態的問題

一、問題描述：

1. 跳轉模式：介面A-->介面B（介面A中通過 this.$router.push({name:'元件B名稱',params: {引數}}) 通過開啟新tab頁的方式開啟介面B。）

2.關閉介面B，回到介面A

3.再次從A到B時，開啟的介面B仍然是上次的狀態，哪怕傳遞的引數不一樣。

另：router宣告如下

{
 path: 'demo/pageB',name: 'pageB',component: _import('demo/pageB'),meta: {
  requiresAuth: true,keepAlive: false,// 不需要被快取
  title: '介面B'
 }
}
 

二、原因：　詳見vue-router官網

三、解決方式：在介面B離開時，銷燬元件。程式碼如下：

// 導航離開該元件的對應路由時呼叫[可以訪問元件例項 `this`]
beforeRouteLeave (to,from,next) {
 // 銷燬元件，避免通過vue-router再次進入時，仍是上次的history快取的狀態
 this.$destroy(true)
 next()
}　　

更多beforeRouteLeave 詳見官網

四、其它解決方式（未成功）：

vue-router官網提供了 router.replace(location,onComplete?,onAbort?) 的方式，使得不向 history中新增記錄，但是我未嘗試成功，具體原因暫不知。

官網描述：

我的寫法：

this.$router.replace({name:'元件B名稱',params: {引數}},() => { this.warning('test!') },() => { this.warning('test!') }) 　　

以上這篇解決vue-router 切換tab標籤關閉時快取問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。