Strange router behaviour [Ionic 6 Vue]

Ionic Framework Ionic Vue
1

Hello. I am experiencing some weird behavior when trying to create a route with an optional parameter.

Here is the router code:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import TabsPage from '../views/TabsPage.vue'
import Results from '@/views/tabs/Results.vue'

const routes = [
  {
    path: '/',
    redirect: '/tabs/home'
  },
  {
    path: '/tabs/',
    component: TabsPage,
    children: [
      {
        path: '',
        redirect: '/tabs/home'
      },
      { // This causes the problem
        path: 'results/:id?',
        component: Results,
      },
      {
        path: 'home',
        component: () => import('@/views/tabs/Home.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3Page.vue')
      }
    ]
  }
]

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

export default router

The tabs are defined like this:

<ion-tab-button tab="home" href="/tabs/home">

And the child route is called like that:

<ion-item button :router-link="'/tabs/results/'+result.id">

This behavior begins only after going to the child route “/tabs/results/:id”

screen-20220515-130552 (1)

Let me know if the problem doesn’t become clear from the video. The app hangs when switching between tabs, sometimes the tab buttons lead to an incorrect route. Seems like the whole webview is refreshed sometimes. There also seems to be an animation bug (kind of like it’s triggered twice). This strange behavior is more obvious on android than in the browser.

Am I doing something wrong is it a bug? Thanks in advance!

2

I managed to fix my problem. To everybody that experiences the same thing, take a close look at this page Vue Navigation: Use Ionic + Vue Router to Create Multi-Page Apps , especially the part about working with tabs. Also keep in mind the following:

  1. Every component, that is used in the tabs routes should have ion-page
  2. Use shared URLs when possible, avoid nested routes
1 Like