Vue 过渡无法自动加载

Question

我有一个如下所示的 Vue 页面。但是打开的时候不会自动加载，而是手动点击刷新才能看到内容。

如果我注释掉转场，页面就可以显示，说明内容没有问题。

我还打印了路线路径，正如预期的那样正确，表明路线工作正常。

我想咨询如何让页面自动加载？也达到了切换回本页面时刷新的目的。预先感谢！

vue 文件：

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <p>route = {{ route.fullPath }}</p>
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
</template>

<script setup >
import { computed } from 'vue';
import useStore from '@/store';

const { tagsView } = useStore();

const cachedViews = computed(() => tagsView.cachedViews);
</script>

<style lang="scss" scoped>
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>

scss

/* fade-transform */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-enter-to {
  opacity: 1;
  transform: translateX(0);
}

.fade-transform-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

Answer 1

您可以在路线上添加观察者，以在返回页面时触发更新。这将在切换回来时强制刷新视图。

    `const route = useRoute();
      onMounted(() => {
        console.log('Component mounted', route.fullPath);
      });
      watch(route, (newRoute, oldRoute) => {
       if (newRoute.fullPath !== oldRoute.fullPath) {
        console.log('Route changed, refreshing...');
        }
       });`

如果不需要缓存，请删除 keep-alive。 如果需要缓存，请使用cachedViews 进行管理或使用按键强制刷新。 在路线上使用手表来检测变化并触发更新。