I would recommend having a second router view, one for all of your main pages and the transition for all child pages of a main page e.g.
<router-view/>
<router-view name="popup" v-if="$route.meta.popup"/> // Add your css transition or use a dialog
Routes
{
path: '/home/',
component: () => import('layouts/default.vue'),
children: [
{
path: '',
component: () => import('pages/Home/index.vue'),
name: 'home',
meta: {
popup: false,
},
},
{
path: 'about',
name: 'about.popup',
components: {
default: () => import('pages/Home/index.vue'),
popup: () => import('pages/About/index.vue')
},
meta: {
popup: true,
},
},
]
},