Example for tabs

[UnKnoWn-Consortium]

I have tried the following setup for the ion-tabs navigation. It is sort-of working for certain scenarios (e.g. navigating from /home to /home/about or from /home to /shop) but things start to get awkward when I try to do "cross-tab" navigation (e.g. from /home to /shop/1234).

When I am at /shop/1234, the tabs can no longer bring me back to /home, /shop, or /search. It keeps on changing the path (e.g. from /shop/1234 to /shop/home)... Have I got the router setup wrong?

P.S. A repo replicating the situation will be added.

<ion-tabs>
        <ion-tab tab="home">
            <ion-vue-router></ion-vue-router>
        </ion-tab>

        <ion-tab tab="shops">
            <ion-vue-router name="shop"></ion-vue-router>
        </ion-tab>

        <ion-tab tab="search">
            <ion-vue-router name="search"></ion-vue-router>
        </ion-tab>

        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="home">
                <ion-label>Home</ion-label>
                <ion-icon name="home"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="shops">
                <ion-label>Shops</ion-label>
                <ion-icon name="shop"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="search">
                <ion-label>Search</ion-label>
                <ion-icon name="navigate"></ion-icon>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

export default new IonicVueRouter({
    routes: [{
        path: "",
        component: Default,
        children: [{
            path: "/home",
            name: "home",
            components: {
                "default": Home
            },
        }, {
            path: "/home/about",
            name: "about",
            components: {
                "default": About
            }
        }, {
            path: "/shops",
            name: "shops",
            components: {
                "shop": Shop
            },
        }, {
            path: "/shops/:id",
            name: "shop-details",
            components: {
                "shop": Shop
            },
            props: true,
        }, {
            path: "/search",
            name: "search",
            components: {
                "search": Search
            },
        }, {
            path: "/search/:id",
            name: "searching",
            components: {
                "search": Search
            },
            props: true,
        }]
    }],
});

[michaeltintiuc]

Yeah, you have it right for the most part, the routing is broken due to how ion-tab-buttons are setup. By default the value of tab is appended to the URL, this is as you've mentioned covering the most basic of use cases. To handle more advanced stuff, pass the to property, which behaves the same way as the to prop of router-link

This is from the ionic docs:

        <!-- Provide extra data to route -->
        <ion-tab-button tab="map" :to="{ name: 'app.map', params: { mode: 'dark' } }">
          <ion-icon name="map"></ion-icon>
          <ion-label>Map</ion-label>
        </ion-tab-button>

The above will make it so when you click on the Map tab you would always be redirected to the app.map route with specific params set. For this to work you should give your routes names.

In case if you'd like to have the same tab to be active for several routes you should set the routes prop on ion-tabs it could be a route name or an array of those. This will handle the route matching for you.

Also I'd move the routes such as search/:id to be children of search/

I'm working on a proper example for tabs as it's the most confusing part of Ionic. Meanwhile I'd suggest checking out the usage docs for Vue: https://github.com/ionic-team/ionic/tree/master/core/src/components/tabs#vue

[UnKnoWn-Consortium]

@michaeltintiuc

Oh crap, I have totally overlooked this doc.... https://github.com/ionic-team/ionic/tree/master/core/src/components/tabs#vue

Thank you very much for bringing it up... I have been reading the Ionic doc at https://ionicframework.com/docs/api/tab-button and kept on trying with the href and tab attributes mentioned there... both to no avail...

Thanks again for your reply and your help.