[Vuejs]-New Router page doesn't load the component until manually reloading the entire page

by

0👍

Try modifying your code like this:

/* From the Template */
<router-view @clickedNext1="onClickTransition" v-slot="{ Component }">
 <transition :key="$route.fullPath" name="route1" mode="out-in">
  <component :is="Component"></component>
 </transition>
</router-view>

The "key" property set to $route.fullPath should ensure that the transition is done correctly whenever the route is changed.

EDIT

To solve this, you can add a ":enter-active-class" and ":leave-active-class" property to the transition component, which allows you to specify the class that should be applied to the element during the transition.

In your App.vue component, you can update the transition component like this:

<transition :key="$route.fullPath" name="route1" mode="out-in" :enter-active-class="'route1-enter-active'" :leave-active-class="'route1-leave-active'">
  <component :is="Component" />
</transition>

This will ensure that the correct classes are applied to the element during the transition, and that the components are fully rendered before the animation starts.

For more info i should you to visit the official wiki: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions

👤Riccardo Pirosu

-1👍

You can try using

created() {
    this.$watch(() => this.$route.params, () => {
      // WATCH FOR ROUTE CHANGES
    },
}
👤Edmon Belchev

Leave a comment