javascript - Vue transition cloudn't be loaded automatically - Stack Overflow

I have a Vue page like below. But it will not be auto loaded when I open it, but I have manually click the refresh to see the content of it.

If I comment out the transition, the page can be shown, indicating that the content has no issue.

I also print the route path, that's correct as expected, indicating the route works fine.

I want to consult how to make the page be automatically loaded? And also achieving the goal to make it be refreshed when switch back to this page. Thanks in advance!

The vue file:

<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>

The 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);
}

I have a Vue page like below. But it will not be auto loaded when I open it, but I have manually click the refresh to see the content of it.

If I comment out the transition, the page can be shown, indicating that the content has no issue.

I also print the route path, that's correct as expected, indicating the route works fine.

I want to consult how to make the page be automatically loaded? And also achieving the goal to make it be refreshed when switch back to this page. Thanks in advance!

The vue file:

<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>

The 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);
}

• javascript
• vue.js
• transition

Share Improve this question Follow asked Nov 23, 2024 at 7:10 Solaris_9Solaris_9 20144 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can add a watcher on the route to trigger updates when returning to the page. This will force the view to refresh when switching back.

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

If you don't need caching, remove keep-alive. If caching is necessary, manage it with cachedViews or force a refresh with a key. Use watch on the route to detect changes and trigger updates.