快捷導(dǎo)航

解決vue-router 切換tab標(biāo)簽關(guān)閉時(shí)緩存問題

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

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

在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 (你在哪寫的那個(gè)<router-view ></router-view>標(biāo)簽就在哪改動(dòng))

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

當(dāng)點(diǎn)關(guān)閉標(biāo)簽的時(shí)候如果不想當(dāng)前頁面緩存加上

接著遇到了第一次緩存第二次改為false后打開不緩存了在關(guān)閉標(biāo)簽頁面加上這個(gè)

補(bǔ)充知識(shí)：解決通過vue-router打開tab頁，下次進(jìn)入還是上次history緩存的界面狀態(tài)的問題

一、問題描述：

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

2.關(guān)閉界面B，回到界面A

3.再次從A到B時(shí)，打開的界面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離開時(shí)，銷毀組件。代碼如下：

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

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

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

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

官網(wǎng)描述：