实现

由于刷新业务涉及路由通信所以在store/pinia创建全局变量refresh

    state:()=>{
        return{
            // 是否刷新
            refresh:false,
        }
    },

在header组件中是为刷新按钮绑定点击实现并对refresh取反操作

<el-button type="default" @click="refresh=!refresh" icon="Refresh" circle></el-button>

在一级路由组件内监听是否刷新

// 刷新完毕后加载组件
<component v-if="!loading" :is="Component"></component>

const { collapse,refresh } = storeToRefs(useSettingStore())
const loading=ref(false);

// 监听是否刷新
watch(()=>refresh.value,()=>{
    loading.value=true;
    // dom渲染完毕后loading改为false
    nextTick(()=>{
        loading.value=false;
    })
})

效果