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 ponent and the right ponent is shown instantly when i switch tab.

Now to the problem.

I'm trying to add a new route/ponent 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 ponent. 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 ponent 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/',
    ponent: Tabs,
    children: [
      {
        path: '',
        redirect: 'home'
      },
      {
        path: 'home',
        ponent: () => import('@/views/Home.vue')
      },
      {
        path: 'tab1',
        ponent: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        ponent: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        ponent: () => import('@/views/Tab3.vue')
      }
    ]
  },
  {
    path: '/login',
    ponent: () => import('@/views/Login.vue'),
  }
]

Thank you!

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 ponent and the right ponent is shown instantly when i switch tab.

Now to the problem.

I'm trying to add a new route/ponent 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 ponent. 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 ponent 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/',
    ponent: Tabs,
    children: [
      {
        path: '',
        redirect: 'home'
      },
      {
        path: 'home',
        ponent: () => import('@/views/Home.vue')
      },
      {
        path: 'tab1',
        ponent: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        ponent: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        ponent: () => import('@/views/Tab3.vue')
      }
    ]
  },
  {
    path: '/login',
    ponent: () => import('@/views/Login.vue'),
  }
]

Thank you!

• javascript
• vue.js
• ionic-framework
• vue-router
• ionic-vue

Share Improve this question Follow edited Dec 3, 2020 at 18:31 Dan 63.2k1818 gold badges111111 silver badges119119 bronze badges asked Dec 3, 2020 at 18:01 SuxsemSuxsem 10811 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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>

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 ponent or attribute) instead of href when you want to navigate to another route, for the best experience.

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

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