vue 同一ルートジャンプ強制リフレッシュ

Vue は、シングルページ アプリケーション (SPA) を開発するための非常に人気のある JavaScript フレームワークです。シングルページアプリケーションを開発する場合、Vue Router は不可欠です。 Vue Router は、Vue.js によって公式に提供されるルーティング マネージャーであり、開発者がナビゲーション リクエストを処理するためのルート、ビュー、および動作を簡単に定義できるようにします。

Vue Router は、同じルート間を移動するときにデフォルトでページのコンテンツを再ロードしませんが、以前にロードされたコンテンツをキャッシュから読み取ります。この方法によりパフォーマンスは向上しますが、場合によっては、ページ コンテンツが更新された直後に最新のデータを表示する必要がある場合など、開発者はページを強制的に更新する必要があります。

この記事では、Vue で同じルートを強制的に更新する方法を紹介します。

問題の説明

Vue Router では、同じルート間をジャンプしても、Vue はコンポーネントを再レンダリングしません。これは、コンポーネントのライフサイクル フック関数が再度トリガーされないことを意味します。つまり、コンポーネント内のデータをバックエンドと同期させたい場合は、更新ロジックを手動で追加する必要があります。

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

この例では、updateData 関数を手動で呼び出してメッセージ データを更新し、バックエンドと同期していることを確認します。このアプローチで問題は解決できますが、特にアプリケーションが複雑になると、ジャンプするたびに更新関数を手動で呼び出すのが面倒になる可能性があります。

解決策

Vue Router には、現在のルーティング情報が含まれる $route という名前の組み込みグローバル変数があります。 $route を追跡することでルートの変更を検出し、ルートが変更されたときにコンポーネントを強制的に更新できます。

コンポーネントの作成またはマウントされたライフサイクル フック関数に $route リスナーを登録し、$route が変更されたときにページを強制的に更新できます。

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
    this.$router.afterEach((to, from) => {
      if (to.path === from.path) {
        this.$nextTick(() => {
          location.reload()
        })
      }
    })
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

この例では、マウントされたライフサイクル フックに $route リスナーを登録し、ルートの変更が検出されたときにページを強制的に更新しました。 to.path と from.path を使用して、現在のルートが前のルートと同じかどうかを比較します。それらが同じであれば、ユーザーが現在のルートを更新していると判断でき、このとき、location.reload() 関数を通じてページを強制的に更新できます。

ページを強制的に更新する前に、Vue の $nextTick() 関数を使用したことに注意してください。この関数は、データが完全に更新されたことを確認するために、DOM が更新されるまでコールバック関数を延期できます。 $nextTick() 関数を使用せずにページを直接強制的に更新すると、ページのレンダリングが不完全になったり、データ更新が遅れたりする可能性があります。

概要

Vue 単一ページ アプリケーションを開発する場合、同じルート間をジャンプする必要があることがよくあります。デフォルトでは、Vue はコンポーネントを再レンダリングしないため、ページ コンテンツがバックエンド データと同期しなくなる可能性があります。 Vue Router で $route の変更を監視することで、同じルート間のジャンプを検出し、ジャンプ時にページを強制的に更新することで、データの非同期の問題を解決できます。

以上がvue 同一ルートジャンプ強制リフレッシュの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。