search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.92k stars 13.52k forks source link

bug: vue, router does not find correct view when navigating back out of tabs #24904

Open nguyentichduy2k opened 2 years ago

nguyentichduy2k commented 2 years ago

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

I have an example on codesandbox: https://codesandbox.io/s/example-router-bug-91320z

  1. Click on change router button
  2. Click to change tabs
  3. Click back button => it don't work here
  4. Change version of ionic in package.json 
    "@ionic/vue": "^5.4",
"@ionic/vue-router": "^5.4",
  5. Reload browser and go back to step 1

Code Reproduction URL

No response

Ionic Info

Ionic

Capacitor

Additional Information

No response

liamdebeasi commented 2 years ago

Thanks for the issue. Is this the correct CodeSandbox? It does not appear to be using Ionic at all.

nguyentichduy2k commented 2 years ago

Oh sorry I missed the z at the end of the link, please check it again. https://codesandbox.io/s/example-router-bug-91320z

liamdebeasi commented 2 years ago

Thanks. The issue looks to be with the initial route to /tab/1. If you click "Change Router", the tabs component is transitioned in, but no tab is selected.

Changing the router.push in home.vue to router.push('/tab/1/tab1'); seems to fix the issue. Given your router setup, I would expect your current code to automatically redirect to tab1, but I did not dig too much into why that was not happening.

If a Tabs component is active, there should always be one inner tab selected. Can you try that on your end and let me know if it resolves the issue?

nguyentichduy2k commented 2 years ago

Thanks for answer but it only works with 2 tabs when 3 tabs it don't work, https://codesandbox.io/s/example-router-bug-91320z

liamdebeasi commented 2 years ago

Thanks, I can reproduce this behavior. The problem is that when going from Tab 3 to the defaultHref Home, Ionic does not find a leaving view. It tries to look for Tab 3, but since the leaving view should be Tabs (since you are leaving tabs), it returns undefined.

nguyentichduy2k commented 2 years ago

yeah but i still found it fine in ionic 5.9.3 version, there was some change at ionic 6 that generated error

gzusgo-thinkbig commented 1 year ago

I been having a similar problem the router found the the exact match but other views are stack hover the right one you can see the right url the wrong view been display. very annoying and is all over the place.

We are using ver: "@ionic/vue": "~6.7.5", "@ionic/vue-router": "~6.7.5",

Not sure we can downgrade our project to 5.9.3.