ホームページ > ウェブフロントエンド > Vue.js > Vue3 でページの部分的なコンテンツを更新する方法

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

王林
リリース: 2023-05-26 17:31:26
転載
3628 人が閲覧しました

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

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

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

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

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

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

グローバル状態で

isRouterAlive

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

1

2

3

4

5

6

7

8

9

import { defineStore } from 'pinia'

export const useAppStore = defineStore({

  id: 'app',

  state: () =>

    ({

      isRouterAlive: true,

      isLoading: false

    } as { isRouterAlive: boolean; isLoading: boolean })

})

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<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 の再レンダリングを実現します

rreee

以上がVue3 でページの部分的なコンテンツを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート