Ionic Vue Router param persist on tab change manually

I’m doing some logic based on the URL params on tab change

I have set params in route under children

//router/index.js
path: 'tab3/:action/:value', 

If tab3 is manually switched by clicking tab buttons do nothing
if tab3 change using vue router.push() or replace() get the params and do some logic

but unfortunately im getting error when I manually change the tab
**

No match found for location with path “/tabs/tab3”

**

tab change works with this code router.replace('/tabs/tab3/add/USA'); if I go back to other tab and switch again to tab3 manually the url params persist in the url, so my logic not working

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/:action/:value',     // params for tab3 route
        component: () => import('@/views/Tab3.vue')
      }
    ]
  }
]

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

export default router


//  Tab1.vue

<script>
import { useRouter } from "vue-router";
  setup() {
    const router = useRouter();

      moveToTab3(){
       router.replace('/tabs/tab3/add/USA');
      }
 }
  
</script>


// Tabs3.vue

 if (route.params.action === "add") {
    // tab change using router
   // console.log(route.params.value)
}else{
  // tab change manually
 // do nothing
}

2 posts - 1 participant

Read full topic