【硅谷甄选】页面刷新功能的实现

本文主要是介绍【硅谷甄选】页面刷新功能的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路：点击刷新按钮，触发事件使 refresh 的值发生改变（store 共享数据）。主页面监听 refresh 的值，如果发生改变，则对页面组件进行销毁，紧接着再使用 nextTick 对页面进行创建。

// 控制当前组件是否销毁创建
const flag = ref(true);
// 监听仓库内数据是否发生变化，变化说明点击过刷新按钮
watch(() => LayoutSettingStore.refresh, () => {// 点击刷新按钮，路由组件销毁，再重建flag.value = false;// 如果用延迟函数，不能得到销毁的准确时间，所以要用nextTick(模板渲染完毕后执行)nextTick(() => {flag.value = true;});
})

<!-- 路由出口组件 --><router-view v-slot="{ Component }"><transition name="fade"><!-- 渲染 layout 一级路由组建的子路由 --><component :is="Component" v-if="flag" /></transition></router-view>

这篇关于【硅谷甄选】页面刷新功能的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---