Issues navigating to different routes when using tabs in Ionic Vue app

I'm an experienced front-end developer but I'm very new to Ionic so please forgive me for asking a silly question.

I'm using Ionic-Vue to create a mobile app.

I started with the tabs default template. I can switch between tabs without any problem: each tab has an associated route and component and the right component is shown instantly when i switch tab.

Now to the problem.

I'm trying to add a new route/component for the Login screen. I want the login screen to be outside of the tab system so I put it as a top-level route "/login" with its associated component. I added a new button on the first tab in order to login, this is the code.

<ion-button href="/login">LOGIN</ion-button>

But when i press the button THE WHOLE PAGE RELOADS taking much more time to switch component then when I navigate through the different tabs. It seems to me that it's not using the internal router but instead it's changing the actual URL of the page causing the whole application to be requested again to the server. I think it's something related to the fact I'm using the tab default template, maybe if you use tabs you cannot have stand-alone routes?

This is my route table:

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!

You should use a router-link to direct the router:

<router-link to="/login">
   <ion-button>LOGIN</ion-button>
</router-link>

The to object has various options for configuration. If your route had a name property like name: 'login', you could also have accessed it that way, which can be cleaner in the template for longer route paths:

<router-link :to="{ name: 'login' }">
   <ion-button>LOGIN</ion-button>
</router-link>