Routes not showing when using transitions and router.push #2439
Description
Reproduction
Steps to reproduce the bug
When trying to use transitions on routes everything works correctly but when I use router.push to navigate to a page, the page we navigate to doesn't display at all and gets fixed when the app refreshes
Is it because of how Im implementing it or is it something else ?
`<script lang="ts">
import ButtomNavigation from './components/global/ButtomNavigation.vue';
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
components: {
ButtomNavigation
},
setup() {
const route = useRoute();
const currentRoute = computed(() => route.path);
const transition = computed(()=>{
return route.meta.transition
})
return {
transition,
currentRoute,
};
}
});
</script>
This is the router index file :
`import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SupportView from '@/views/SupportView.vue'
import LoginPage from '../views/LoginPage.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
meta:{
transition:'fade',
}
},
{
path: '/login',
name: 'Login',
component: LoginPage,
meta:{
transition:'fade',
}
},
{
path: '/support',
name: 'support',
component: SupportView,
meta:{
transition:'fade',
},
children: [
{
path: ':category',
name: 'supportCategory',
component: SupportView,
children: [
{
path: ':subCategory',
name: 'supportSubCategory',
component: SupportView
}
]
}
]
}
]
})
export default router
`
Expected behavior
When using router.push it should show all the transitions and the routes when we are navigating to them
Actual behavior
The destination route doesnt display until we refresh the page
Additional information
Project is made with capacitor vue js