Vue Router が元のページを保持しない問題を解決する方法

Vue Router は、Vue.js が公式に提供するルーティング管理ソリューションで、シングルページ アプリケーション (SPA) でのページ ジャンプやコンポーネントの動的読み込みを実現できます。 Vue Router の重要性は自明であり、プロジェクトにより良いユーザー エクスペリエンスと効率を提供できます。

しかし、Vue Router を使用すると、問題が発生する可能性があります。ページにジャンプすると、元のページが破壊され、元の状態とデータが保持されなくなります。この状況は通常、vue-router を使用してクロスドメイン ページ ジャンプ (あるドメイン名またはサブドメイン名から別のドメイン名またはサブドメイン名のページにジャンプするなど) を実行するときに発生します。このとき、ルートはある Web ページから別の Web ページに到達し、ページ全体を再読み込みする必要があり、以前の状態とデータは失われます。

それでは、Vue Router が元のページを保持しない問題を解決するにはどうすればよいでしょうか?

1. Keep-Alive コンポーネントの使用

Vue.js は、すでにロードされているコンポーネント インスタンスをキャッシュできる Keep-Alive コンポーネントを提供します。再レンダリングされて破壊されました。ページがジャンプしたときに元のページのステータスとデータを保持するには、Keep-Alive コンポーネントを使用します。

以下に示すように、状態とデータを保持する必要があるコンポーネントに Keep-Alive コンポーネントを追加します。

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

これにより、コンポーネントの状態とデータが保持され、ページがジャンプ効果も同時に得られます。

2. ストレージの使用

Keep-Alive コンポーネントを使用したくない場合は、ストレージを使用してページのステータスとデータを保存することもできます。コンポーネント内のRouteLeave前にルートジャンプのライフサイクル関数をリッスンし、保存する必要がある状態とデータをストレージに保存します。ルートジャンプ後に作成されたライフサイクル関数で、ストレージから状態とデータを読み取り、コンポーネントに復元します。 。

具体的なコードは次のように実装されます。

// 路由跳转前保存组件状态和数据到Storage
beforeRouteLeave(to, from, next) {
  localStorage.setItem('data', JSON.stringify(this.data));
  next();
}
// 路由跳转后从Storage中读取组件状态和数据并赋值给组件
created() {
  let data = JSON.parse(localStorage.getItem('data'));
  if (data) {
    this.data = data;
  }
}

これにより、ページがジャンプしたときに元のページのステータスとデータを保持できます。

3. Vuex の使用

Vuex は Vue.js の状態管理フレームワークであり、複数のコンポーネント間で状態を共有するために使用されます。ページの状態とデータを保持する必要がある場合は、Vuex を使用してページの状態とデータをグローバル ステートに保存し、ページ ジャンプ後にグローバル ステートからそれを読み取り、コンポーネントに割り当てることができます。

具体的なコード実装は次のとおりです:

// 在Vuex Store中定义状态和数据
const state = {
  data: {}
}
const mutations = {
  setData(state, data) {
    state.data = data;
  }
}
// 在组件中引入Vuex和Store，并将数据存储在全局状态中
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setData']),
    beforeRouteLeave(to, from, next) {
      this.setData(this.data);
      next();
    }
  },
  created() {
    this.data = this.$store.state.data;
  }
}

これにより、ページがジャンプしたときに元のページのステータスとデータを Vuex を通じて保持できます。

概要:

上記は、Vue Router が元のページのステータスとデータを保持しない問題に対する一般的な解決策をいくつか示しています。それぞれに独自の長所と短所があり、次のことが可能です。特定のビジネス ニーズに応じて適切なソリューションを選択します。 Keep-Alive コンポーネント、ストレージ、Vuex のいずれであっても、ページがジャンプしたときに元の状態とデータを保持し、ユーザー エクスペリエンスと効率を向上させるのに役立ちます。

以上がVue Router が元のページを保持しない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。