Disable web history for tab navigation in ionic vue

I have an ionic vue tabs starter application with router configured as below, I want to disable web history for the tabs navigation.

Issue : Change the tabs using tab button and press the device back button, the app will navigate back to previous tab.

Expectation : changing the tas should not create web history. On pressing the device back button, it should not go back to web history.

import { createRouter, createWebHistory } from '@ionic/vue-router';

import Tabs from '../views/Tabs.vue'

const routes = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        name:'tab3',
        component: () => import('@/views/Tab3.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3 posts - 2 participants

Read full topic