ルートキャッシュ

原理

ルートキャッシュは、vue-router の keep-alive コンポーネントを使用して実現されています。keep-alive コンポーネントは、コンポーネントの状態をキャッシュし、コンポーネントが再度アクセスされたときに、新しいコンポーネントを再作成するのではなく、キャッシュからコンポーネントを直接取得します。 keep-alive コンポーネントは、コンポーネントの name プロパティをキャッシュのキーとして使用するため、プロジェクト内のページコンポーネントはすべて @elegant-router/vue プラグインを介して name プロパティが自動的に注入されているので、ルートデータの meta プロパティにある keepAlive フィールドを設定するだけで済みます。 vue-router の多階層ルートキャッシュには問題があるため、プロジェクト内のルートデータはすべて二階層ルートに変換され、各ルートが正常にキャッシュされるように保証されています。

使い方

ルートデータの meta プロパティにある keepAlive フィールドを設定することで、ルートがキャッシュされるかどうかを制御できます。

{
  name: 'about',
  path: '/about',
  component: 'layout.base$view.about',
  meta: {
    title: 'about',
    keepAlive: true
  }
}