Ionic-framework: bug: ionic vue not going back to correct tab after replacing route

[mattmilan-dev]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

With a router containing a parent and child routes (tabs), start at a child route, navigating to a parent route, then back to a different child route, the child route loaded the second time around actually shows the first child component. The issue in the DOM shows as having a lower z-index and the 'ion-page-hidden' class on the second child route.

Example:

• /parent-route
• /tabs
• 
  
  • /child-1
  
  
• 
  
  • /child-2
  
  

Navigating from /tabs/child-1 to /parent-route back to /tabs/child-2 shows the child one component instead of the child two component (although the tabs component and URL do indeed show the child-2 route).

Expected behavior:
With the example above, the child-2 component should be shown when redirecting back down from the parent route.

Steps to reproduce:
Create a new ionic project for vue with 3 routes as explained in the example, using the tabs component. On load redirect to /tabs/child-1 and then use useRouter().replace('/parent-route') then useRouter().replace('/tabs/child-2').

Related code:
router/index.ts

const routes = {
  {
    path: '/',
    redirect: '/tabs/child-1'
  },
  {
    path: '/tabs',
    component: Tabs,
    children: [
      {
        path: 'child-1',
        component: () => import('@/views/ChildOne.vue')    
      },
      {
        path: 'child-2',
        component: () => import('@/views/ChildTwo.vue')
      }
    ]
  }
}

Unfortunately, my actual repo closed source so I can't disclose the actual code, however the router look near identical to the above. With the effect happening using the .replace('ROUTE') method. In reality the parent route is an sign-in (auth) route, and the children represent auth locked content. If a user logs out it moves them to the parent route and then when they log in it redirects them back to the child (tabs) route.

Other information:
In my actual app. Initial DOM on child-1: (1 parent route, 1 tabs route, 4 children routes)

After redirecting to the parent page, and back to the other child page

How the DOM should actually look if the bug wasn't present:

What actually shows on screen (The initial child component with the correct tabs icon highlighted)

What should actually show on screen (The redirected child component with the correct tabs icon highlighted)

Ionic info:

Ionic:

   Ionic CLI       : 6.12.1 (/Users/devleaf_matt/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.3

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res : 0.15.2
   native-run  : 1.2.2

System:

   NodeJS : v12.18.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. Can you please provide a full GitHub repo that I can use to reproduce the issue? The easiest way to do this would be to copy the minimal code required to an Ionic starter app.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[mattmilan-dev]

Hi Liam,

Thanks for your rapid response. Getting a github repo up now as we speak. Writing the readme and should be up in 5 and tagged on this issue.

[mattmilan-dev]

Link here for github repo with instructions:
https://github.com/mattmilan-dev/Ionic-Vue-Routing-Bug

[liamdebeasi]

Thanks! I can reproduce the issue. I will work on a fix for this.

[mattmilan-dev]

Awesome, look forward to the fix being in place. Apologies for not submitting a fix request myself. I've only got started with vue about a month ago so don't feel confident enough to know exactly what's going wrong. Thanks for your lightning-fast responses though 👍

[AiNings]

I have the same problem

[yxg-xg]

I have the same problem.I felt so confused for this

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

Please note you will need an updated version of the vue-router pre-release: npm install vue-router@next

[mattmilan-dev]

Seems to be working as expected now on my actual app. Great job 👍

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22566, and a fix will be available in an upcoming release of Ionic Framework.