Vueでkeep-aliveがinclude/excludeを使用しても機能しない問題


最近、プロジェクトの再構築にkeep-aliveVue内蔵コンポーネントが使用されています(は抽象コンポーネントです.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 //       
    }
  }
])

   
   
   





これにより、コンポーネントをキャッシュしないことができます.