Nested routes doesn't load the component

Ionic Framework Ionic Vue
1

Hi guys, I just started to use ionic and this issue came up that I click the button on tab one , it moves to the url but it doesn’t load the component on top .

This is the sample repo

Im trying to do what Mike is doing here but it didn’t work in my code.

Thanks in advance.

2

This way of doing nested routes is deprecated and no longer recommended.

Try doing this instead:

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab1/tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3.vue'),
      },
    ]
  }
]

When you nest routes using the children array, you will need a nested IonRouterOutlet. Nested routing is almost never needed (except for a few advanced cases), so be sure to review our navigation docs before using it: Vue Navigation - Ionic Documentation

Adding child routes to tabs is also documented here: Vue Navigation - Ionic Documentation