解決通過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!') })