解決vue-router 切換tab標簽關閉時緩存問題

更新時間：2020年07月22日 08:45:42 作者：hlvy

這篇文章主要介紹了解決vue-router 切換tab標簽關閉時緩存問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在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'], resolve),
  meta: {
  keepAlive: true // 需要被緩存
  }
  },{
  path: 'fungAdm',
  component: resolve => require(['@/pages/product/fundPros/fungAdm.vue'], resolve),
  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緩存的界面狀態(tài)的問題

一、問題描述：

1. 跳轉(zhuǎn)模式：界面A-->界面B（界面A中通過 this.$router.push({name:'組件B名稱', params: {參數(shù)}}) 通過打開新tab頁的方式打開界面B。）

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

3.再次從A到B時，打開的界面B仍然是上次的狀態(tài)，哪怕傳遞的參數(shù)不一樣。

另：router聲明如下

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

二、原因：　詳見vue-router官網(wǎng)

三、解決方式：在界面B離開時，銷毀組件。代碼如下：

// 導航離開該組件的對應路由時調(diào)用[可以訪問組件實例 `this`]
beforeRouteLeave (to, from, next) {
 // 銷毀組件，避免通過vue-router再次進入時，仍是上次的history緩存的狀態(tài)
 this.$destroy(true)
 next()
}

更多beforeRouteLeave 詳見官網(wǎng)

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

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

官網(wǎng)描述：