Tab-Bar Parent Child duplicate pages | structural problem

I am rather new to Vue 3 and I think I have a problem with the proper way to use the router or why I have duplicate contents in the following example. I think I am still didn’t get my head around the main concept in this use case:

I mainly want to have a tab-bar at the bottom of the screen always visible after a login-screen has successfully be submitted. I have the following structure:

App.vue

<template>
  <ion-app>
   <ion-router-outlet />
  </ion-app>
</template>

Tabs.vue

<template>
  <ion-page>
   <ion-tabs> 
    <ion-header>
     <ion-toolbar> <!-- optionally -->
       <nav class="navbar navbar-expand navbar-dark bg-primary">
         [...]
       </nav>
      </ion-toolbar>
     </ion-header>

     
       <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :src="require(`@/assets/icon-App.svg`)" />
          <ion-label>tab1</ion-label>
        </ion-tab-button>
          
        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <ion-icon :src="require(`@/assets/icon-find.svg`)" />
          <ion-label>tab2</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="tab3" href="/tabs/tab3">
          <ion-icon :src="require(`@/assets/icon-B.svg`)" />
          <ion-label>tab3</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

router.ts

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/login',
    component: () => import('@/components/Login.vue')
  },
  {
    path: '/tabs/',
    component: () => import('@/components/Tabs.vue'),
    children: [
      {
        path: '',
        //redirect: 'tab1'
        component: Tab1
      },
      {
        path: 'tab1',
        component: Tab1
      },
      {
        path: 'tab2',
        component: Tab2
      },
      {
        path: 'tab3',
        component: Tab3
      },
      {
        path: '/profile',
        name: 'profile',
        // lazy-loaded
        component: () => import('./components/Profile.vue')
      }
    ]
  }
];

my problem now is that the main child page starts in the middle of the screen and not at the top and there seems to be the child page duplicated (above the actual one) or content from formerly visited tabs. thus there still is some structural problem of my app. is it correct that there is the ion-router-outlet in the App.vue and the router-view and the tab-structure in the Tabs.vue + the single tabs in their respective tab1/2/3.vue? can someone help me?

1 post - 1 participant

Read full topic