search

ModusCreateOrg / ionic-vue

Vuejs integration for Ionic versions 4 and 5
MIT License
272 stars 26 forks source link

ion-tab-button clicks forward to unwanted url (1.2.15) #82

Closed zwacky closed 5 years ago

zwacky commented 5 years ago

My navigation looks like this:

<ion-tab-button tab="new" class="navbar__button" @click.prevent>
    <router-link :to="{ name: 'app.titles.new.list' }">
        New Tab
    </router-link>
</ion-tab-button>

with @modus/ionic-vue: 1.2.14 this worked. with @modus/ionic-vue: 1.2.15 this first routes to the correct route from <router-link> and then forwards to /new, because of tab="new".

Should I try to remove the click listeners myself or what do you think is the best approach here? Downgrading to 0.2.14 fixes this. Cheers

michaeltintiuc commented 5 years ago

Hey so what you're doing is quite counter intuitive.

The ion-tab-button gets a click handler under the hood, which redirects to the value of :to attribute and falls back to the value of tab attribute.

The :to attribute is identical to the one you can pass to router-link.

Since you've added the router-link element, it's click handler fires first, then the event bubbles up to ion-tab-button and triggers it's click handler, since you didn't provide a :to attribute it uses the tab attribute for navigation. This is expected behvaiour with your setup.

So in your case just remove the router-link element and use it's :to attribute on ion-tab-button. The @click.prevent does nothing as it's a shorthand for event.preventDefault() so remove that as well.

P.S. The difference between versions is probably due to the fact that @click.prevent adds an empty click handler. In the later versions I decided to not allow users to override the lib's click handler, but rather prepend it. So your click handler runs before the one that the lib creates for redirection. This allows for any required setup before tab switching.

zwacky commented 5 years ago

Perfect! Using :to directly on <ion-tab-button> solves this.

zwacky commented 5 years ago

Due to SEO reasons: Is it possible to expose the href of these tabs? before the <router-link> created an <a> with an href attribute that solved the web/SEO issue.

michaeltintiuc commented 5 years ago

As a hack perhaps you can keep the router-link and prevent the click on it