How to use ion-tabs auto active specific page without click

Ionic Framework Ionic Vue
1

Hello Guys, I have a question how am I using the tabs function when I router the specific page when that have ion-tabs with auto active the first page of the tab. Like the Tab of bootstrap.

for example, I clicked the news page ( not the home default page ), inside news page have ion-tabs, and have 3 tabs of ion-tab-button.
but when I was in news, the first tab button of the page I wanna active in news, unnecessary clicked again the first tab button. Like this…

Hope My question makes some ionic teacher understand and get help. Thank You so much.

2

I just figured it out from the last minutes ago.

Unable using ion-tab active the content as I want or maybe combine between ion-slide and ion-tabs.
The best solution is using ion-segment to make content auto active use router on a specific page.

For example like:

    <ion-toolbar>
        <ion-segment value="news" @ionChange="segmentChanged($event)">
            <ion-segment-button value="news">
                <ion-label>news</ion-label>
            </ion-segment-button>
            <ion-segment-button value="pasta">
                <ion-label>pasta</ion-label>
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>


    <tab-1-notificate v-if="selectedSegment == 'news'" />
    <tab-2-notificate v-else-if="selectedSegment == 'voucher'" />

setup() {
        let selectedSegment = ref('news')

        const segmentChanged = async (evt) => {

            console.log(evt.target.value);

            selectedSegment.value = evt.target.value

            console.log(selectedSegment);

        }

        return {

            segmentChanged,

            selectedSegment

        };

    }