How to load a component without a page reload on ion-button click?

Issue

I have a button on the homepage of my application:

<ion-button href="/start" class="btn" color="danger">start</ion-button>

However, I noticed it actually reloads the page when clicked.

I also have ionic tabs (https://ionicframework.com/docs/api/tabs), and when a tab is clicked a component is loaded instantly.

How can I achieve the same functionality for ion-button?

Solution

The tab component has an integration with the router, which allows the tab to function as a vue-router link. ion-button doesn't seem to have the same integration. The documentation for the href prop states:

Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

Using href makes the button function as a regular browser link which will cause the page to reload. Instead, you can wrap the ion-button in a router-link tag or call $router.push in the button's click event.

Answered By - stellr42