Vueでkeep-aliveがinclude/excludeを使用しても機能しない問題
1340 ワード
最近、プロジェクトの再構築にkeep-aliveVue内蔵コンポーネントが使用されています(
公式サイトの使い方を見ると簡単ですが、キャッシュコンポーネントを設定したり、キャッシュしないで使用することができます.
ここでは、コンポーネントをキャッシュしないでexcludeを使用し、キャッシュされていないコンポーネントにname属性を追加する必要があります.
キャッシュするコンポーネントが多重化コンポーネントであるためidに従って異なるデータを動的にロードする必要があるが、機能していないことが判明し、コンポーネントがキャッシュされていることが判明し、長い間プロジェクトに複数のルーティング出口があることを発見するとexcludeやincludeは機能しないが、ルーティングにrouterを追加する.meta属性はこの問題を解決することができる.
これにより、コンポーネントをキャッシュしないことができます.
は抽象コンポーネントです.DOM要素自体はレンダリングされず、コンポーネントの親コンポーネントチェーンにも表示されません).公式サイトの使い方を見ると簡単ですが、キャッシュコンポーネントを設定したり、キャッシュしないで使用することができます.
include
-文字列または正規表現.名前が一致するコンポーネントのみがキャッシュされます.exclude
-文字列または正規表現.名前が一致するコンポーネントはキャッシュされません.max
-数値.最大数のコンポーネントインスタンスをキャッシュできます.ここでは、コンポーネントをキャッシュしないでexcludeを使用し、キャッシュされていないコンポーネントにname属性を追加する必要があります.
キャッシュするコンポーネントが多重化コンポーネントであるためidに従って異なるデータを動的にロードする必要があるが、機能していないことが判明し、コンポーネントがキャッシュされていることが判明し、長い間プロジェクトに複数のルーティング出口があることを発見するとexcludeやincludeは機能しないが、ルーティングにrouterを追加する.meta属性はこの問題を解決することができる.
export default new Router([
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true //
}
}, {
path: '/:id',
name: 'test',
component: Test,
meta: {
keepAlive: false //
}
}
])
これにより、コンポーネントをキャッシュしないことができます.