Cara memuat semula sebahagian kandungan halaman dalam Vue3

Untuk mencapai muat semula separa halaman, kami hanya perlu melaksanakan pemaparan semula komponen setempat (dom). Dalam Vue, cara paling mudah untuk mencapai kesan ini ialah menggunakan arahan v-if.

Dalam Vue2, selain menggunakan perintah v-if untuk memaparkan semula dom setempat, kami juga boleh mencipta komponen kosong baharu Apabila kami perlu memuat semula halaman setempat, lompat ke halaman komponen kosong ini , dan kemudian tambah Pengawal melompat kembali ke halaman asal. beforeRouteEnter

Bagaimana untuk mengklik butang muat semula dalam Vue3.X untuk memuatkan semula DOM dalam kotak merah dan memaparkan status pemuatan yang sepadan? .

Sejak sintaks

dalam Vue3 Mari gunakan arahan script setup untuk memaparkan semula DOM tempatan untuk mencapai perkara ini keperluan. onBeforeRouteUpdateonBeforeRouteUpdateLangkah 1: Takrifkan pengecam keadaan v-if

Tentukan keadaan muat semula pengecam

dalam keadaan global dan berikan semula berdasarkan perubahan dalam

.

mengenal pasti status pemuatan. isRouterAlive

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

isRouterAliveLangkah kedua, pinjam arahan v-if untuk memaparkan semula nod domisLoading

<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>

Langkah ketiga, ubah suai nilai isRouterAlive untuk merealisasikan rendering semula dom

rreeee

Atas ialah kandungan terperinci Cara memuat semula sebahagian kandungan halaman dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!