bug: Tabs not changing ion page correctly

[Diogo-Coding]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

The Ion page is not changing to the correct tab page after several route changes before going back to a tab page.

I see that the events tell that the page is the correct one, also the route is the correct one, also the tab selected is the correct one, but... the ion page that is being shown is not the correct one, its just the last one that user has been and doesnt update to the correct one.

Expected Behavior

Ion Page should change to the correct one based on the tab Selected

Steps to Reproduce

First go and clone the project, install and preview it. Then:

1. Load every tab
2. Go to Tab 1
3. Click on go to random view
4. Click on go to another random view
5. Click on go to tab 3

If you load page, and dont go tab 3, and skip step 1. Then it will work, but if you have tab 3 loaded and follow the steps, then the bug will happen

Code Reproduction URL

https://github.com/Diogo-Coding/bug-tabs-routes

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - /home/sistemas/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /home/sistemas/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/lib/index.js
   - /home/sistemas/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/index.js
   - /home/sistemas/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.5 (/home/sistemas/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.5.4

Capacitor:

Capacitor CLI : 5.5.1 @capacitor/android : 5.5.1 @capacitor/core : 5.5.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run (update available: 2.0.1) : 1.7.4

System:

NodeJS : v20.9.0 (/home/sistemas/.nvm/versions/node/v20.9.0/bin/node) npm : 10.1.0 OS : Linux 5.15

Additional Information

The project is created as a demo to visualize the bug, lot of package.json librarys are not being used

[AlexisChung]

Same issue here. but i use Ionic Framework : @ionic/vue 8.2.5

[dev-charles15531]

Same issue here. but i use Ionic Framework : @ionic/vue 8.2.5

Can you reproduce on stackblitz?

[AlexisChung]

Hi , yes , the URL is https://stackblitz.com/edit/vitejs-vite-x4cjkg?file=src%2Fmain.js

Step: 1.click tab "Library" 2.click menu go to "item1" 3.click menu go to "item2" 4.click menu go to "home"

you will see "home tab" is active, but the view still show Library page.

[arjunkalburgi]

I'm having the same issue, but I also have this weird error that fails to load the page.

Interestingly enough @AlexisChung your stackblitz works perfectly for me, did you get it working somehow?

[thetaPC]

Thank you for submitting the issue!

Can you elaborate the reasoning of why the Item pages aren't under the children array within the router/index.js file? By moving them there, I was able to get the pages to render correctly:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Example from '../components/Example.vue';
const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/',
    component: Example,
    children: [
      {
        path: '',
        redirect: '/home',
      },
      {
        path: 'home',
        component: () => import('../views/HomePage.vue'),
      },
      {
        path: 'radio',
        component: () => import('../views/RadioPage.vue'),
      },
      {
        path: 'library',
        component: () => import('../views/LibraryPage.vue'),
      },
      {
        path: 'item1',
        component: () => import('../views/item1.vue'),
      },
      {
        path: 'item2',
        component: () => import('../views/item2.vue'),
      },
    ],
  },
  // {
  //   path: '/item1',
  //   name: 'item1',
  //   component: () => import('../views/item1.vue'),
  // },
  // {
  //   path: '/item2',
  //   name: 'item2',
  //   component: () => import('../views/item2.vue'),
  // },
];

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

export default router;

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!