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
dalam Vue3 Mari gunakan arahan script setup
untuk memaparkan semula DOM tempatan untuk mencapai perkara ini keperluan. onBeforeRouteUpdate
onBeforeRouteUpdate
Langkah 1: Takrifkan pengecam keadaan v-if
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 }) })
isRouterAlive
Langkah 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 './SideMenuView.vue' import NavMenuView from './NavMenuView.vue' import TabsView from './TabsView.vue' import { useAppStore } from '@/stores/app' const appStore = useAppStore() const isCollapse = ref(false) </script> <style lang="scss" scoped> …… CSS样式 </style>
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!