vue create my-refresh-app
cd my-refresh-app
npm install pinia @vue/router

import { defineStore } from 'pinia'
 
const useLayoutSettingStore = defineStore('SettingStore', {
    state: () => {
        return {
            fold: false, // 是否折疊側邊欄
            refresh: false // 刷新效果
        }
    },
    actions: {
        toggleRefresh() {
            this.refresh = !this.refresh;
        }
    }
})
 
export default useLayoutSettingStore;

<template>
    <el-button size="default" circle="false" @click="updateRefresh">
        <el-icon>
            <Refresh></Refresh>
        </el-icon>
    </el-button>
    <el-button size="default" circle="false">
        <el-icon>
            <FullScreen></FullScreen>
        </el-icon>
    </el-button>
    <el-button size="default" circle="false">
        <el-icon>
            <Setting></Setting>
        </el-icon>
    </el-button>
    <img src="@/../public/favicon.ico" style="margin: 0 12px">
    <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
            admin
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>退出登錄</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
 
<script setup lang="ts" name="setting">
// 獲取一下 配置
import useLayOutSettingStore from '@/store/modules/setting';
let layoutSettingStore = useLayOutSettingStore();
 
// 刷新按鈕點擊事件
const updateRefresh = () => {
    layoutSettingStore.refresh = !layoutSettingStore.refresh;
}
</script>
 
<style scoped></style>

<template>
    <!-- 路由組件出口位置 -->
    <router-view v-slot="{ Component }">
        <transition name="fade">
            <component :is="Component" v-if="flag" />
        </transition>
    </router-view>
</template>
 
<script setup lang="ts" nam="main">
import { watch, ref, nextTick } from 'vue';
import useLayOutSettingStore from '@/store/modules/setting';
let layoutSettingStore = useLayOutSettingStore();
 
// 控制當前組件是否銷毀重建
let flag = ref(true);
 
// 監(jiān)聽倉庫內部的數(shù)據(jù)是否發(fā)生變化,如果反生變化，說明用戶點擊過刷新按鈕
watch(() => layoutSettingStore.refresh, () => {
    // 點擊刷新按鈕: 路由組件需要銷毀
    flag.value = false;
    nextTick(() => {
        flag.value = true;
    })
})
</script>
 
<style scoped>
.fade-enter-from {
    opacity: 0;
    transform: rotate(0deg)
}
 
.fade-enter-active {
    transition: all 1s;
}
 
.fade-enter-to {
    opacity: 1;
    transform: rotate(360deg);
}
</style>

npm run serve