How to navigate to outer router outlet?

I’ve tabs like in the documentation:

const routes = [
    path: '/faq,
    component: () => import('@/views/faq.vue'), // How to navigate here from inner tabs?
    path: '/',
    redirect: '/tabs/tab1',
    path: '/tabs/',
    component: Tabs,
    children: [
        path: '',
        redirect: 'tab1',
        path: 'tab1',
        component: () => import('@/views/Tab1.vue'),
        path: 'tab2',
        component: () => import('@/views/Tab2.vue'),
        path: 'tab3',
        component: () => import('@/views/Tab3.vue'),

And the template:


        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="tab1" href="/tabs/tab1">
            <ion-icon :icon="triangle" />
            <ion-label>Tab 1</ion-label>

          <ion-tab-button tab="tab2" href="/tabs/tab2">
            <ion-icon :icon="ellipse" />
            <ion-label>Tab 2</ion-label>

          <ion-tab-button tab="tab3" href="/tabs/tab3">
            <ion-icon :icon="square" />
            <ion-label>Tab 3</ion-label>

Everything is wrapped in App.vue in another ion-router-outlet component. I’m not able to navigate out of the inner tabs like /faq. The view doesn’t rerender likely because it’s trying rerender in the inner router outlet.

Solution: I created an event bus to propagate an event to be consumed in App.vue, which instructs the router instance to push the route at the most upper ion-router-outlet, I suppose.

It actually turns out I forgot to add the page component so the transition can happen. This took me three days :wink: