Vue 2 <keep-alive>不適用於<router-view>和鍵

我使用vue-router和一系列組件如標籤。每個<router-link>是一個選項卡，下面的空間是<router-view>。其中兩個選項卡是具有不同過濾器的相同組件，假設它們是products，並且路由器添加了用於過濾的參數：/products/new & /products/sale。Vue 2 <keep-alive>不適用於<router-view>和鍵

products的內部是單獨的product元件，當打開路線時它們被安裝。我的問題是，當我在路線之間切換時，濾鏡參數發生變化時，每次都會重新安裝product組件。我想緩存它們，所以來回切換更容易。爲此，我設置了<keep-alive>並將:key='$route.fullPath'添加到我的<router-view>，但它們似乎沒有被緩存。當我在products之間切換時，每個product仍然發射mounted()事件。

<keep-alive> 
    <router-view :key='$route.fullPath'></router-view> 
</keep-alive>

我應該讓每個products視圖變成一個單獨的組件嗎？

來源

2016-11-30 okwme

我不認爲你將能夠使用keep-alive緩存router-view。從keep-alive的documentation：

保活不與功能部件的工作，因爲他們沒有實例被緩存。

而且router-view是一個功能部件，從documentation：

該組件是呈現爲給定的路徑匹配的部件的功能部件。

爲了使這項工作，你需要有內部keep-alive活力的組成部分，就像下面：

<keep-alive> 
    <products ></products> 
</keep-alive>

來源

2016-12-01 02:25:56 Saurabh

您好感謝指出了這一點！首先想到的第一個解決方案是刪除''，並放回我的動態組件，如： ''這裏路由的名稱是組件的名稱。這在路由方面起作用，但在兩個版本之間單擊時仍然在重新安裝組件：\ – okwme

似乎不再是真實的。引用[路由器文檔]（http://router.vuejs.org/en/api/router-view.html）：'因爲它只是一個組件，它可以與和一起使用。將兩者一起使用時，請務必在內部使用 – oliverpool

Vue 2 <keep-alive>不適用於<router-view>和鍵

回答

相關問題