Vue3 でページの部分的なコンテンツを更新する方法-Vue.js-php.cn

Vue3 でページの部分的なコンテンツを更新する方法

王林

リリース： 2023-05-26 17:31:26

転載

3475 人が閲覧しました

ページの部分的な更新を実現するには、ローカルコンポーネント (dom) の再レンダリングを実装するだけです。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。

Vue2 では、v-if コマンドを使用してローカル dom を再レンダリングするだけでなく、新しい空のコンポーネントを作成することもできます。ローカルページを更新する必要がある場合は、この空のコンポーネントページにジャンプし、空のコンポーネントの beforeRouteEnter ガードで、元のページに戻ります。

Vue3.X の更新ボタンをクリックして赤いボックス内の DOM を再読み込みし、対応する読み込みステータスを表示するにはどうすればよいですか? 。

Vue3 でページの部分的なコンテンツを更新する方法

Vue3 の script setup 構文と onBeforeRouteUpdate の 2 つの API により、したがって、v-if ディレクティブを使用してローカル dom を再レンダリングし、この要件を達成します。ステップ 1: 状態識別子を定義する

グローバル状態で

isRouterAlive

識別子の更新状態を定義し、isRouterAlive## の変更に基づいて再レンダリングします。＃。 isLoading 読み込みステータスを識別します。

import { defineStore } from &#39;pinia&#39;
export const useAppStore = defineStore({
  id: &#39;app&#39;,
  state: () =>
    ({
      isRouterAlive: true,
      isLoading: false
    } as { isRouterAlive: boolean; isLoading: boolean })
})

ログイン後にコピー

2 番目のステップ、v-if 命令を借用して dom ノードを再レンダリングします

<template>
  <div class="common-layout">
    <el-container>
      <SideMenuView :collapse="isCollapse"></SideMenuView>
      <el-container>
        <NavMenuView v-model:collapse="isCollapse"></NavMenuView>
        <TabsView></TabsView>
        <!--核心 start-->
        <el-main
          v-loading="appStore.isLoading"
          element-loading-text="页面加载中……"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <router-view v-if="appStore.isRouterAlive"> </router-view>
        </el-main>
        <!--核心 end-->
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import SideMenuView from &#39;./SideMenuView.vue&#39;
import NavMenuView from &#39;./NavMenuView.vue&#39;
import TabsView from &#39;./TabsView.vue&#39;
import { useAppStore } from &#39;@/stores/app&#39;
const appStore = useAppStore()
const isCollapse = ref(false)
</script>

<style lang="scss" scoped>
…… CSS样式
</style>

ログイン後にコピー

3 番目のステップ、isRouterAlive 値を変更して dom の再レンダリングを実現します