How to navigate to outer router outlet?

Ionic Framework Ionic Vue
1

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:

<template>
  <ion-page>
    <ion-content>
      <ion-tabs>
        <ion-router-outlet></ion-router-outlet>

        <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>

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

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

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.

2

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.

3

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