ionic-framework: bug: ionic vue, ionic react incorrect view rendered when using router.go(n) and n < -1
Bug Report
Ionic version: [ ] 4.x [x] 5.x
Current behavior: Trying to go back 2 or more routes.
Expected behavior: App navigates back X amount of routes as long as there’s that many in the history stack
Steps to reproduce: Related code: https://github.com/NunoSav/ionic-vue3-router-go-back
Other information: I also made a vue3+router sample that mirrors the one above but without Ionic in it to see if the issue was with vue-router itself, it wasn’t. You can check it here https://github.com/NunoSav/vue3-router-go-back
Ionic info:
Ionic:
Ionic CLI : 6.12.2 (/Users/nur/.config/yarn/global/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.5.0
Capacitor:
Capacitor CLI : 2.4.3
@capacitor/core : 2.4.3
Utility:
cordova-res (update available: 0.15.2) : 0.15.1
native-run (update available: 1.2.2) : 1.2.1
System:
NodeJS : v12.16.3 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Big Sur
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 32 (13 by maintainers)
Commits related to this issue
- fix(vue): using router.go now shows correct view (#23773) resolves #22563 — committed to ionic-team/ionic-framework by liamdebeasi 3 years ago
Well, it was working good for our purposes. Would rather have a small performance hit on low-end devices than have a major bug like this.
Hi everyone,
Quick update on things: Turns out Vue Router has an undocumented
deltavalue! Along withwindow.history.state.position, I was able to use this to implementrouter.gosupport in Ionic Vue and have prepared a dev build. It would be really helpful if people could test and provide feedback:As this is a development build of Ionic, please do not use this in production.
Note on Ionic React: According to https://github.com/ReactTraining/history/issues/36#issuecomment-233652964 and https://github.com/ReactTraining/history/issues/334#issuecomment-244250026, it does not seem like React Router exposes a delta value. The
window.history.state.positionnoted in https://github.com/ionic-team/ionic-framework/issues/22563#issuecomment-876617148 is provided by Vue Router, and it does not look like React Router has something similar. One option is we could build this position tracking into Ionic React ourselves, but I am a bit hesitant to start alteringwindow.history.stateespecially when React Router already manages the state for us.Uh, actually window.history.state has position information, I see length doesn’t change but the position can be used.
Any suggestions for a workaround? The only thing we have found so far is a window.location.reload. Which is far from acceptable for the user experience of the app.
Took a closer look at this. Turns out this is the same issue as https://github.com/ionic-team/ionic-framework/issues/22400 in Ionic React, which makes sense since Ionic Vue and Ionic React share similar routing integration code.
The main problem is we do not know how many pages a user has gone back, which makes fixing this tricky. It looks like this is not a problem in Ionic Angular, so I will probably look there for some hints on how to solve this.
edit: Removing this from the 5.5.3 milestone as it is unlikely I will be able to solve, test, and merge this by next week.
https://github.com/ionic-team/ionic-framework/issues/22540 was already fixed and should be shipping out soon. I’ve assigned this one to a milestone so you can track our progress on the milestones page: https://github.com/ionic-team/ionic-framework/milestones. The milestone assignment is subject to change, but it should give you a rough idea of how close fixes are to shipping.
Thanks, I can reproduce this. When you do
router.go(n)it looks like we ignore thenvalue and assume 1 page navigation.