CODEWITHSUNDEEP
javascriptvue.jstransition
Solaris_9
Solaris_9

Reputation: 201

Vue transition cloudn't be loaded automatically

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

Upvotes: 0

Views: 25

Answers (1)

Muhammad AAMIR
Muhammad AAMIR

Reputation: 1

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.

Upvotes: 0

Related Questions