2

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!

Dan
  • 59,490
  • 13
  • 101
  • 110
Suxsem
  • 90
  • 1
  • 7

3 Answers3

4

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>
Dan
  • 59,490
  • 13
  • 101
  • 110
  • Wooow this totally solved the issue! Just a minor problem: if i click the browser's back button and then I try to click "login" again the url changes to /login but I still see the home component. Do you have any idea? – Suxsem Dec 03 '20 at 18:12
  • Are you sure it's not a cache issue? Back button should work with either history or hash mode – Dan Dec 03 '20 at 18:19
  • umh... the page doesn't reload anymore so I don't think it has anything to do with the cache. Do you think a video of the problem could be useful? – Suxsem Dec 03 '20 at 18:20
  • Possibly. But there might be something else wrong with your project because this is standard functionality. Do you get any error? – Dan Dec 03 '20 at 18:21
  • 2
    You were right, there were warnings in the console, stupid me. Very thank you my friend, this is why I love computer science – Suxsem Dec 03 '20 at 18:30
  • 1
    I was looking for the same in the documentation but not sure why this is not mentioned in their documentation of Vue. Thanks to you! +1 @Dan – Viral Apr 14 '22 at 07:35
2

In addition to Dan's answer, note that you can also use the router-link attribute of <ion-button>:

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

Remember to use router-link (either the component or attribute) instead of href when you want to navigate to another route, for the best experience.

marsnebulasoup
  • 2,530
  • 2
  • 16
  • 37
Suxsem
  • 90
  • 1
  • 7
1

Alternatively, you can use <ion-button>'s router-link property, like so:

<ion-button :router-link="{ name: 'login'}">Login</ion-button>
marsnebulasoup
  • 2,530
  • 2
  • 16
  • 37
whitersun
  • 111
  • 1
  • 5