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

思路：点击刷新按钮，触发事件使 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">
      
      <component :is="Component" v-if="flag" />
    transition>
  router-view>