Vue 2 <keep-alive><router-view>とキーが動作しない

Question

私は、タブのような一連のコンポーネントでvue-routerを使用しています。各<router-link>はタブで、下のスペースは<router-view>です。 2つのタブはそれぞれ異なるフィルタを持つ同じコンポーネントですが、それらがproductsで、ルータがフィルタリングのパラメータを追加するとします：/products/new & /products/sale

productsの中には、経路が開かれたときに取り付けられる個別のproductコンポーネントがあります。私の問題は、私がルートを切り替えると、フィルタのパラメータが変更されたときに、毎回productコンポーネントが再マウントされるということです。私はそれらをキャッシュして前後の切り替えが簡単になるようにしたいと思います。これを行うには、<keep-alive>を設定し、:key='$route.fullPath'を<router-view>に追加しましたが、キャッシュされていないようです。各productは、productsの間で切り替えると、まだmounted()イベントを発しています。

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

それぞれproductsビューを別のコンポーネントにする必要がありますか？

Answer 1

router-viewをkeep-aliveでキャッシュすることはできません。 keep-aliveのdocumentationから：

キープアライブ彼らはキャッシュされるインスタンスを持っていないので、機能コンポーネントでは動作しません。

そしてrouter-viewdocumentationから機能性成分である：成分は、与えられたパスの整合コンポーネントを描画する機能要素である

。

、この作業を行うには、次のように、keep-alive内の動的コンポーネントを持っている必要があります：それを指摘して

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