feat: @ionic/vue ion-tabs can't access ion-router-outlet properties

[mattsteve]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request I was previously using @modus/ionic-vue instead of @ionic/vue which didn't automatically place the <ion-router-outlet>, had to place it manually inside the template. This allowed me to control properties on it, specifically I was controlling the "animation" property per-page. With the ion-tabs in @ionic/vue, I have no access to the ion-router-outlet element since it's automatically generated.

Describe Preferred Solution Add a new slot that overrides the current router, such as:

<ion-tabs>
    <template #content>
        <ion-router-outlet :animation="isAnimation" />
    </template>
</ion-tabs>

Describe Alternatives Alternatively can add new properties on the ion-tab component itself such as "router-animation", but that's cherry-picking and allowing access to override the default router makes the component more versatile.

Related Code

<ion-tabs>
    <template #content>
        <ion-router-outlet :animation="isAnimation" />
    </template>
</ion-tabs>

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23477, and a fix will be available in an upcoming release of Ionic Framework.

Starting in Framework v5.6.10 you will be able to provide a router outlet directly to ion-tabs:

<ion-tabs>
  <ion-router-outlet></ion-router-outlet>
  <ion-tab-bar>...</ion-tab-bar>
</ion-tabs>

Note that this will become the default in Ionic Vue v6.0 and a deprecation warning has been added for developers who have not provided a router outlet. This was done for better consistency with Ionic React.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.