Rumah > hujung hadapan web > View.js > teks badan

Cara memuat semula sebahagian kandungan halaman dalam Vue3

王林
Lepaskan: 2023-05-26 17:31:26
ke hadapan
3516 orang telah melayarinya

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

Cara memuat semula sebahagian kandungan halaman dalam Vue3

Cara memuat semula sebahagian kandungan halaman dalam Vue3

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 })
})
Salin selepas log masuk
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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:yisu.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan