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 (edit: I just checked. the setup of a tab is called up to three times). 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?
In order for the tab bar to be visible on your login page, it should be a child route of the /tabs/ route. In other words, your login page needs to be rendered within the tabs context in order for the tab bar to show up.
The positioning issue is likely due to your usage of the following code:
<ion-header>
<ion-toolbar> <!-- optionally -->
<nav class="navbar navbar-expand navbar-dark bg-primary">
[...]
</nav>
</ion-toolbar>
</ion-header>
If you want to have the header persistent across all tabs, I recommend moving that above ion-tabs.
thank you very much for your reply @Idebeasi
actually I don’t want to have the tab bar included in the login page. after one has logged in successfully, the main GUI with the tab bar however should appear. this works but I am always having these problems in which all the content areas are duplicated (they are actually included multiple times inside the DOM which looks like this [see e.g. three “home” pages]):
the toolbar you mentioned is not the reason since I commented it out. I still have the feeling I am not using the tab-bar routing (parent child) concept correctly or should I not use export default defineComponent in every .vue file or any other idea?
Hard to say what the issue is without being able to reproduce it myself. Can you provide a GitHub repo I can look at?
thank you @Idebeasi
you can check it here: github repo
take a look at this - https://github.com/aaronksaunders/ionic-vue3-sample-2/blob/4cb079ef3ccf0c5616aa2268a3c2d5696430c508/src/views/Tabs.vue
You have way too much going on in your Tabs.vue component, you have a lingering router-view sitting in there.I suggest you clean up the template also to make it easier to debug
thank you @aaronksaunders - I very much cleaned up the template of the Tabs.vue now and this fixed the problem of the duplicate contents - however if I change the tabs via clicking on the tab-buttons the content kind of gets piled on top of each other instead of replacing the whole tab-page
after I go to the URL of home I click Tab1 then Tab2 then Tab3 and then the DOM looks like this
this looks actually fine. but the content of the tabs is rendered wrongly. there is no error in the console except the warning Will-change memory consumption is too high (when going to Tab2) but the render problems also appear without going to Tab2. am I missing something fundamental to replace the tab content with another?
To exemplify here is a screenshot after the described behaviour above. I opened the URL of tab1 then clicked tab2 then tab3 and back to tab1. The result is that the main content shows a mixture of tab1 tab2 and tab3 rendered on top of each other.
where is your project… and why didn’t you start with the tabs template? and then add the business logic? This project is too complex IMHO for me to try and help you out,
I suggest you start with the tabs template, get the UI functioning and then add back in all of the business logic.
Maybe someone else can help out
1 Like
thank you @aaronksaunders for coming back to me and for your suggestion
actually I started with the tabs template and it is now almost the same as in the example and when being on the tabs page tab1 I only use the views tab1 | tab2 and tab3 and of course the tabs.vue. no other files are used. they all work fine when opened via the URL but there is always a problem with routing and the following rendering
I might start the project anew but that would be a big nuisance. I still think the problem could be rather trivial?
Update: I just started a new Ionic project from bottom-up (tabs template) and so far I have no problems with the rendering of the three tabs. I think I probably made a mistake when setting up the project before. solved - thanks again @aaronksaunders
1 Like
