Tab not marked as selected on initial route

[DepkaCZ]

📚 What are you trying to do?

Hi,

according to docs you should set alias to / on the tab you wish to render instead of having index.vue in pages directory. That works fine as the tab gets rendered but the button in <ion-tab-bar> is not marked as selected. This doesn't work even in the modules playground project.

Does anyone know please how to fix that other than checking for route programatically and setting selected to true ?

🔍 What have you tried?

I've tried to change the href on <ion-tab-button> to / but that completely ruined the active tab detection. Furthermore, can some please explain to me how does it even work please ? Like ...when i set alias in define page meta on specific tab how does it know to render the parent component as well ? It's pretty unclear from the docs :(

ℹ️ Additional context

No response

[buddy94]

I have the same problem!
As a workaround I created an index page outside my tabs and in the onBeforeMounted i redirect the user to the tabs/home: router.replace('/tabs/home');

This was working fine until the new update. Now it will not be redirect to the /tabs/home and I don't know why...

[CHIBX]

@DepkaCZ Can you drop a link to your current reproduction

[DepkaCZ]

@CHIBX Hi, just run the playground and navigate to / route

[nWacky]

I was having the same issue

Ionic's documentation suggests redirecting from / to /home when home tab location is /home.

Example from Usage with Router - ionicframework.com:

// src/router.ts

const routes: Array<RouteRecordRaw> = [
    { path: '/', redirect: '/home', },
    {
      path: '/',
      component: Tabs,
      children: [
        { path: '', redirect: '/home', },
        { path: 'home', component: () => import('./views/HomePage.vue'), },
    }
]

What helped me is creating pages/index.vue and using redirect in definePageMeta to redirect to the home tab:

<!-- pages/index.vue -->
<script lang="ts" setup>
definePageMeta({
  redirect: "/tabs/home",
});
</script>

<!-- pages/tabs/home/index.vue -->
<script lang="ts" setup>
definePageMeta({
  alias: ["/tabs"],
});
</script>

This way navigating to / redirects to /tabs/home, and Home tab is correctly shown as active on initial route