Routes not showing when using transitions and router.push

[amirsafaricg]

Reproduction

https://play.vuejs.org/#eNqlVmFv2zYQ/Ss3dYMdLJLctOsHzTayDQW6AduKbuuXaUBpibaZSKRAUo691P99j6QsyWmyYWgCx+Lx7t27O/Ip91HNhExuTJRFom6UtnRPhebM8u+aho601qqmya7lk1z2Dlq1lut+N0mDYXBxsac91jRJiM9ljzzF5yKXRElr+DSEh3WtWmmnk2cIm1xEl1EXDn5zU2jRWKqY3CzyyJo8Wo5IlXwtJP9BYS25tJdU4BG45VkV344ikPqdyzx2iLtS4Od++d77Apu1lf8e55jeO8qG27aZXpBfENJKY0OLaNHnmF4AcdguWq0BENIveqpTwCyWIThpmN2eR1nNpBFWKHkes1h2uUmDi5YdQM0tS4aY4HL0be49T4Ej7MuTaUyyMx49n2Muj47ZPA0jwRiwsLxuKowXK5qHNsY7we9oF5tKWYzsnvrWAcNNj2j+RRzTH4YTQz5jMYZRlUrTmlXVihW3ZBV9WLOSf6A4DpEjx0yymrtDMZg+fqSJ85/kEdWqdLvgFAvZJQaAa2Fgk93yAxy+DI1bt1X1Ft1HZCYM7D1tWNKQPB1SwTDvroAv2K9H3cDS2EPlHleqPPiWr5W08ZrVojpQRpP37G/hDx2RK3YDNFnGharQgYzutsJybKLviSspBhPkYoUVOx5q6edIxHDCmeOVoXklp1ly9Y3pzhEQwkPAqTjb8f+Fg3Oz49o4Nmd412jgWmMIJjh/guZu2LAabbgf1bBC2ENGs6864DNwfz7Vf0c/nz2M775wUP0AoCdhTol9RPF+5rXShzcCp1AfoB/e6E//oHUjiXDsOoQ3qubv3VE/id7J0CnfSRZXiDzz6y29RHaKM1IR7S77iEtQnW2gmT3GfXrhr6uPNhn92Q2DnKLgsKWTII7+RGcD+WN3yQdH5uidew81BPe/8NdpClo7Lnqk114fH6j208pB8+3V8oQ0T7E4u01Ic9azz8vTQz2aKEwtrlmDF6SSSOU7n3cbyJCdjmIeDQfDmfNoa21jsjRtZXO7SdDAdPC4fpm8SGZpiWmNrAk3dbzS6s7g+Qbo3Tjy6BpOacl3VqnKxKwRT6X4xPH6VfIqeZ5WYpUCPRWy5HuPfZJxlGkNDttabB4U6WYuKq5/bZwGnBcLTVZ3P3mb1e3p5YCYLS9uH7HfmH2g/FZzVAexGYqzTG84hNVtv/7tF77Hc78J4W4reP/L5jtuVNX6F5x3+x7KCdojP8/2Rz8zITe/m9d7yyHdXVGOqO+G9/eDdHL/VOkD3RfJy1EXvcCYpDBOWCTbXZL7zyrErZQuuc7oqtkTyIqSns1mM69UNeCEjFfK4tXnFKzZe3vDyhJke4vXQsDSEi/Kr/HxwF10xde4mWPP7dU48wA/ECiKYkQAyovfqw4hOv4DnYBcSw==

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>

<style> body{ font-family : 'Vazir'; background-color : white; } .fade-enter-active { animation: fade 0.25s; } .fade-leave-active { animation: fade 0.25s reverse; } @Keyframes fade { from { opacity: 0%; } to { opacity: 100%; } } </style>`

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

[skirtles-code]

I'd be surprised if this is a bug in Vue Router.

I don't see anywhere that you're calling router.push in the reproduction. I tried adding one myself but that seemed to be working for me.

There are some bugs in Vue core with transitions that might be relevant here. Check that your route components only have a single root node, including comments. For example, this can break:

<template>
  <!-- This comment breaks it -->
  <div>
    ...
  </div>
</template>

I believe there's already a PR in the core repo to fix this problem, but I can't tell whether that's relevant to your problem based on the code you've shared.

Also make sure you don't have any warnings or errors in the browser console. I'm not sure how that works with a Capacitor project, but I'd assume there's some way to access the console output.

[skirtles-code]

@paul-thebaud I suggest providing a runnable reproduction, e.g. using the playground. I think it's going to be difficult to figure out what the problem is without one.

[paul-thebaud]

@skirtles-code, I made a playground and no problem. I deep dived my code, I have an eslint disable comment at the template root... My bad. Sorry for disturbing and thanks for your quick answer.