您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3如何實現(xiàn)刷新頁面局部內(nèi)容”,在日常操作中,相信很多人在Vue3如何實現(xiàn)刷新頁面局部內(nèi)容問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue3如何實現(xiàn)刷新頁面局部內(nèi)容”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
想要實現(xiàn)頁面的局部刷新,我們只需要實現(xiàn)局部組件(dom)的重新渲染。在Vue中,想要實現(xiàn)這一效果最簡便的方式方法就是使用v-if
指令。
在Vue2中我們除了使用v-if
指令讓局部dom的重新渲染,也可以新建一個空白組件,需要刷新局部頁面時跳轉(zhuǎn)至這個空白組件頁面,然后在空白組件內(nèi)的beforeRouteEnter
守衛(wèi)中又跳轉(zhuǎn)回原來的頁面。
如下圖所示,如何在Vue3.X中實現(xiàn)點擊刷新按鈕實現(xiàn)紅框范圍內(nèi)的dom重新加載,并展示對應的加載狀態(tài)。
由于Vue3.X中script setup
語法中組件內(nèi)守衛(wèi)只有onBeforeRouteUpdate
及onBeforeRouteUpdate
兩個API,因此我們來借助v-if
指令使局部dom重新渲染來實現(xiàn)這一需求。
在全局狀態(tài)中定義一個isRouterAlive
標識刷新狀態(tài),根據(jù)isRouterAlive
變化來重新渲染。isLoading
標識加載狀態(tài)。
import { defineStore } from 'pinia' export const useAppStore = defineStore({ id: 'app', state: () => ({ isRouterAlive: true, isLoading: false } as { isRouterAlive: boolean; isLoading: boolean }) })
<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>
<template> <div class="tabs-item cursor-pointer arrow-down" ref="buttonRef" @click="onClickOutside" > <el-icon><ArrowDownBold /></el-icon> </div> <el-popover ref="popoverRef" trigger="hover" virtual-triggering :virtual-ref="buttonRef" > <div class="arrow-down-item" @click="handleCommand('refresh')">刷新</div> <div class="arrow-down-item" @click="handleCommand('closeOther')"> 關(guān)閉其他 </div> <div class="arrow-down-item" @click="handleCommand('closeLeft')"> 關(guān)閉左側(cè) </div> <div class="arrow-down-item" @click="handleCommand('closeRight')"> 關(guān)閉右側(cè) </div> </el-popover> </template> <script setup lang="ts"> import { CloseBold, ArrowDownBold } from '@element-plus/icons-vue' import type { MenuItem } from '@/interface/menu' import { useMenuRouterStore } from '@/stores/menu-router' import { useTabsStore } from '@/stores/tabs' import { useAppStore } from '@/stores/app' const router = useRouter() const menuRouterStore = useMenuRouterStore() const tabsStore = useTabsStore() const appStore = useAppStore() // tabs功能操作 const buttonRef = ref() const popoverRef = ref() const onClickOutside = () => { unref(popoverRef).popperRef?.delayHide?.() } const handleCommand = (command: string) => { if (command === 'refresh') { appStore.isLoading = true // 展示數(shù)據(jù)加載狀態(tài) appStore.isRouterAlive = false // 設置為false,卸載dom setTimeout(() => { // 此處采用了定時器,并沒有采用網(wǎng)上比較常見的nextTick appStore.isRouterAlive = true // 設置為true,重新掛載dom appStore.isLoading = false // 隱藏數(shù)據(jù)加載狀態(tài) }, 500) } else if (command === 'closeOther') { tabsStore.closeOther() } else { tabsStore.closeLeftOrRight(command) } } // …… </script> <style lang="scss" scoped> …… CSS樣式 </style>
到此,關(guān)于“Vue3如何實現(xiàn)刷新頁面局部內(nèi)容”的學習就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。