Vue のキープアライブ コンポーネントを介してルート キャッシュを実装する方法

vue のキープアライブ コンポーネントを介してルート キャッシュを実装する方法

フロントエンド開発に Vue を使用する場合、切り替え時に以前のルートのステータスを保持したいというニーズがよく発生します。ルート: より良いユーザー エクスペリエンスを実現するため。 Vue は、この要件の達成に役立つキープアライブと呼ばれるコンポーネントを提供します。

keep-alive は Vue に組み込まれた抽象コンポーネントであり、コンポーネントのキャッシュ効果を実現するためにキャッシュする必要があるコンポーネントの外側でラップできます。ルーティングでキープアライブを使用する場合、 コンポーネントの外側でキープアライブをラップできます。次に、実際の例を使用して、キープアライブを使用してルート キャッシュを実装する方法を示します。

まず、Vue プロジェクトを作成し、vue-router プラグインをインストールする必要があります。コマンド ラインで次のコマンドを実行します。

vue create router-cache-demo
cd router-cache-demo
npm install vue-router

次に、以下に示すように、Home というコンポーネントを作成します。

<template>
  <div>
    <h1 id="Home">Home</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

このコンポーネントは、ボタンがクリックされるとカウンターとボタンを表示します。カウンタ値が 1 増加します。

次に、ルーティング構成ファイルで、Home コンポーネントを導入し、ルーティング パスを設定する必要があります。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
];

const router = new VueRouter({
  routes
});

export default router;

App.vue ファイルでは、 コンポーネントを コンポーネントでラップし、Home コンポーネントをキャッシュできるように include 属性を設定します。

<template>
  <div id="app">
    <keep-alive :include="cachedComponents">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedComponents: ['Home']
    };
  }
};
</script>

ここでは、cachedComponents 配列を設定し、Home コンポーネントを配列に追加して、ルートを切り替えるときにコンポーネントをキャッシュするように Vue に指示します。

最後に、main.js ファイルにルーティング構成ファイルを導入し、それを Vue インスタンスに関連付けます。

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

ここで、ルートを切り替えてみると、他のルートに切り替えてからホーム ルートに戻っても、以前のカウンタ値が保持されていることがわかります。

上記の手順により、Vue のキープアライブ コンポーネントを使用してルーティング キャッシュ効果を実現することに成功しました。実際のニーズに応じて、キャッシュする必要があるルーティング コンポーネントを自由に設定できます。

概要: Vue のキープアライブ コンポーネントを通じて、ルーティング コンポーネントをキャッシュしてユーザー エクスペリエンスを向上させることができます。キープアライブを使用する場合、ルーティング コンポーネントをラップし、App.vue ファイルに include 属性を設定して、どのコンポーネントをキャッシュするかを Vue に指示する必要があります。この記事がお役に立てば幸いです!

以上がVue のキープアライブ コンポーネントを介してルート キャッシュを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。