Ionic Tabs: Tab stays selected when router.back is called


So I’m really liking the Ionic framework for our cross platform app development. It’s been working quite well so far, with everything on Vue being pretty straight forward to use.

I’ve run into a strange problem with the IonTabs component though. The tab remains selected after I make a call to router.back(). The weird thing is it doesn’t seem to be a css class issue. I’ve remove the tab-selected class from the buttons but it still stays selected, visually that is.

Sample code:

<style scoped> {
    color: var(--ion-color-success) !important;
    background: var(--ion-color-medium) !important;

  <ion-page id="mobile-dashboard" ref="ionPage">
          <ion-button @click="testClicked">
    <ion-tabs :refreshKey="refreshKeyTabPage" ref="ionTabsRef">
      <ion-tab-bar slot="bottom" ref="tabBar">
        <ion-tab-button tab="badge" href="/mobile-app/dashboard/xxx">
          <ion-icon :icon=caretUpCircleOutline />

        <ion-tab-button tab="channels" href="/mobile-app/dashboard/xxx">
          <ion-icon :icon=peopleCircleOutline />

        <ion-tab-button tab="settings" href="/mobile-app/dashboard/xxx">
          <ion-icon :icon=cogOutline />

<script setup lang="ts">
  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet, IonHeader, IonToolbar, IonButtons, IonButton } from '@ionic/vue';
  import { caretUpCircleOutline, peopleCircleOutline, cogOutline } from 'ionicons/icons';

<script lang="ts">
  import { defineComponent, onBeforeMount, ref, toRaw } from 'vue'
  import { CapacitorBinder } from '../capacitor'
  import { App } from '@capacitor/app'
  import { isPlatform } from '@ionic/vue'
  import { useBackButton } from '@ionic/vue'
  //import router from '@/router';
  import { useRouter, useRoute} from 'vue-router';

  const recursiveSearch = (obj : any, searchKey : any, results = Array<unknown>()) => {
    const r = results;
    Object.keys(obj).forEach(key => {
        const value = obj[key];
        if(key === searchKey && typeof value !== 'object'){
        }else if(typeof value === 'object'){
          recursiveSearch(value, searchKey, r);
    return r;

  let ionTabsRef = ref();
  let tabBar = ref();

  let router = useRouter();
  let route = useRoute();

  const component = defineComponent({
    async ionViewCanLeave() {
      return false;

    async beforeMount () {
      console.log("--> onBeforeMount")

      ionTabsRef = ref();
      tabBar = ref();

      router = useRouter();
      route = useRoute();

      useBackButton(Number.MAX_SAFE_INTEGER, () => {
        console.log('Handler was called!');
        console.log("--> ", ionTabsRef.value.$el.getSelectedTab());

    async mounted() {
      const result = (await CapacitorBinder.requestPermissions(null))
      console.log("--> Returned result:", result?.result);

      // //tabs.value.$;

      // (this.$refs.tabBar as any).checkActiveTab();
      // console.log("--> ", (this.$refs.tabBar as any).$el.selectedTab);
      // console.log("--> ", tabs.value.$el.getSelectedTab());

    data() {return {
      refreshKeyTabPage: 0,

    methods : {
      testClicked: () => {
        console.log("--> Test clicked");

        // Go back using this hack, otherwise the tabs stay selected
        //if (window.history.state.back != undefined && window.history.state.back != null){router.replace(window.history.state.back);}

  export default component

As you can see from the screenshot below, the behaviour is not quite right… There is no blue included when debugging via Chrome, but it’s always present when debugging via Android. There is some other html element or class that’s being added that I’m unaware of.

So the strange thing is, after connecting the remote inspector using Chrome, the instant it’s connected the tab returns to the correct color, making it nearly impossible for me to debug.

I’ve removed all classes on the ion-tab-button programatically on back, and as expected the UI is a bit strange, but the blue (primary) color remains…

Is there something programatically setting color, or is some sort of Vue specific behaviour needed to make this simple use case work properly?

I would make sure all of your pages/views that you are routing to are wrapped in an IonPage. If they aren’t, you will get weird issues.