Ionic Vue Router param persist on tab change manually

Ionic Framework Ionic Vue
1

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

I got it solved by using named route

// router.index.js 
// remove params for tab3 route and add name property
      {
        path: 'tab3',     // remove params for tab3 route
        name : 'tab3'   //  add named route
        component: () => import('@/views/Tab3.vue')
      }


// Tab1 component
      router.push({
        name: "tab3",
        params: { action: "add", value: 'USA'},
      });


// Tab3 component
// get params from URL
console.log("route.params", route.params);