vue3 で現在のページを更新する方法について話しましょう-Vue.js-php.cn

vue3 で現在のページを更新する方法について話しましょう

藏色散人

リリース： 2023-04-02 08:30:01

転載

9768 人が閲覧しました

この記事は、vue3 に関する関連知識を提供します。また、vue3 で現在のページを更新する方法についても説明します。興味のある友人は、以下を参照してください。すべての人に役立つことを願っています。

1. ビジネスシナリオ

通常、テーブルデータを削除または編集するときは、テーブルデータを更新するためにインターフェイスを再度リクエストします。同時に要求する必要があるインターフェイスが複数ある場合、各インターフェイスを 1 つずつ調整することはできません。それを達成するには、よりフレンドリーな方法を使用する必要があります。

2. 実装のアイデア

最初の最も直感的な方法は、location.reload メソッドや $router.go(0) メソッドを使用するなど、現在のページを直接更新することです。ただし、この方法ではページに白い画面が表示されるため、不親切です。それでは、現在の vue コンポーネントを更新できますか? Vue コンポーネントが再レンダリングされると、そのライフサイクル全体が再度実行され、当然インターフェイスが再度リクエストされることはわかっています。では、現在のコンポーネントを更新するにはどうすればよいでしょうか? 1 つ目は、v-if を通じて現在のページコンポーネントのレンダリングを制御することです。 router-view レンダリングコンポーネントの場合、v-if を router-view に直接追加します。そして、この判定条件を制御することで、例えば isRouterAlive と呼びます。

では、この判定条件をどのように制御するのでしょうか?コンポーネント間の通信が関係するため、provide/inject を使用する必要があります。 router-view コンポーネントの provide を通じて relaod メソッドを提供します。テーブルデータを削除または編集した後、inject を使用して reload メソッドをトリガーします。リロードメソッドでは判定条件を制御します。 realod isRouterAlive=false の場合、コンポーネントを再ロードできるように、nextTick でこれを true に設定します。

コードロジックの実装を見てみましょう。

3. コードの実装

最初に router-viewレンダリングコンポーネントを変更します

<template>
  <div class="main">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
	export default {
    provide(){
        return {
            reload: this.reload
        }
    },
    data(){
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload(){
            this.isRouterAlive = false
            //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件
            this.$nextTick(() => {
              this.isRouterAlive = true  
            })
        }
    }
  }
</script>

ログイン後にコピー

テーブルページで、次のように実装します:

<template>
  <div>
    首页
    <button @click="handleSubmit">刷新</button>
  </div>
</template>

<script>
export default {
  //通过inject获取祖先元素的reload方法
  inject: [&#39;reload&#39;],
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    handleSubmit() {
      // 假如这是一个编辑提交事件
      // 这里是编辑请求的各种逻辑和接口...
      // 编辑执行成功，就刷新当前页面，请求reload
      this.reload()
    },
  },
}
</script>

ログイン後にコピー

このようにすると、ページが空白にならず、アドレスバーがすぐに切り替わることもなく、ユーザーエクスペリエンスが非常に使いやすくなります。

推奨される学習: 「vue ビデオチュートリアル」

以上がvue3 で現在のページを更新する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。