Recently, I developed a component where I implemented router-view exclusively to facilitate route-based changes. It's worth mentioning that this is the second instance of router-view, with the first one residing in the App.vue component. Interestingly, transitions function smoothly with the first instance (working for all routes except those contained within the below-mentioned component).
MainComponent.vue
<template>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.fade-enter-active {
transition-delay: .25s;
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
Below is an example of the route setup:
{
path: '/main',
name: 'main',
component: () => import('../views/MainComponent.vue'),
children: [
{
path: 'first',
name: 'first',
props: { titleName: "First",},
component: () => import('../components/Component.vue')
},
{
path: 'second',
name: 'second',
props: { titleName: "Second"},
component: () => import('../components/Component.vue')
},
{
path: 'third',
name: 'third',
props: { titleName: "Third"},
component: () => import('../components/Component.vue')
}
]
}
I'm curious if there's any specific configuration needed for the transitions to work seamlessly with reusable components in <router-view>.