Although I have experience as a front-end developer, I am new to Ionic and may ask some basic questions. Currently, I am using Ionic-Vue to develop a mobile app.
Initially, I started with the tabs default template which allows me to switch between tabs seamlessly. Each tab has its own route and component, ensuring that the correct content is displayed when navigating between tabs.
However, I encountered an issue when trying to add a Login screen outside of the tab system. I created a top-level route "/login" with its associated component in order to achieve this. To trigger the login action, I added a button within the first tab like so:
<ion-button href="/login">LOGIN</ion-button>
Unfortunately, when clicking on the button, the entire page reloads and it takes longer to switch components compared to navigating through different tabs. It seems like the internal router is not being utilized, and instead, the actual URL of the page is changing, resulting in a full application request to the server.
I suspect that this issue is due to using the tab default template, potentially limiting the ability to have standalone routes alongside tabs.
Here is my current route table for reference:
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/tabs/home'
},
{
path: '/tabs/',
component: Tabs,
children: [
{
path: '',
redirect: 'home'
},
{
path: 'home',
component: () => import('@/views/Home.vue')
},
{
path: 'tab1',
component: () => import('@/views/Tab1.vue')
},
{
path: 'tab2',
component: () => import('@/views/Tab2.vue')
},
{
path: 'tab3',
component: () => import('@/views/Tab3.vue')
}
]
},
{
path: '/login',
component: () => import('@/views/Login.vue'),
}
]
Thank you for your help!