New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NuxtLink - scrollBehavior broken by back navigation #13983
Comments
I have the same issue here. Although it persists in rc-3 it was already there in rc-1. I'm using a similar solution but it is kinda glitchy. The |
I also noticed that the first page scrolls to top first before going to second one. |
Exactly. My best guess is that happens because the scroll position that is passed along to the shorter page is not possible, therefore it goes to the closest top position. That is |
I played around with this issue. If we set the return position always to top:100 scrollBehavior(to, from, savedPosition) {
return { top: 100, left: 0 };
}, In this case we assume that the page allways scrolls to 100 (except the short one ofcourse ). This is working fine with plain vue-3 and vue-router - ( https://stackblitz.com/edit/vue-hbr3jg?file=src%2Frouter.js ) But in Nuxt 3 the short page reset the top position to "0" by accesing the short page. So this "scollBehavior" seems not to play a role in this case at all. Could it be that displaying of the new page recreates the router taking its current top position? I also tried to modify the nuxtApp.vueApp.component("NuxtPage", NuxtPage);
nuxtApp.vueApp.component("NuxtNestedPage", NuxtPage);
nuxtApp.vueApp.component("NuxtChild", NuxtPage);
const baseURL = useRuntimeConfig().app.baseURL;
const routerHistory = process.client ? createWebHistory() : createMemoryHistory(baseURL);
const initialURL = process.server ? nuxtApp.ssrContext.url : createCurrentLocation(baseURL, window.location);
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return { top: 100, left: 0,}
},
history: routerHistory,
routes
});
nuxtApp.vueApp.use(router);
return; so to pass settings directly to router. The result is the same .... |
any news on this? |
Is there any chance there would be some work at this issue? It's still the same at RC6. :( |
I also feel the bug, it's very annoying. It's still the same at RC11. The I hope this bug won't be included into release. I agree, it should be a major bug. |
Try this? |
I think it is all about how much time it takes to It would be better at the moment, I'm using store to save "scrollReady",
I'm relly tired of all those "await until(some state).toBe(true)" Please, if there is smarter, better way, below is my code
|
Would you check with the latest edge channel; this may well have been resolved with nuxt/framework#3851. |
@danielroe, yes, it works as expected in edge channel! Waiting for RC13 👀 Thank you |
Great. Closing this. If you do encounter a problem with edge, please let me know and I'll happily reopen. |
Environment
Linux
v16.14.2
3.0.0-rc.3
npm@7.17.0
vite
-
-
-
Reproduction
https://stackblitz.com/edit/nuxt-starter-xkacmx?file=app/router.options.ts
Scroll the main page a little bit.
go to "Long Page"
go back - the "savedPosition is correct.
now go to "Short Page"
go back - the home-page scrolled to the top.
Describe the bug
If the page, linked by NuxtLink has shorter content as the original page - by navigation back to original page the router not accepting the
savedPosition
(the savedPosition showing correctly by console.log(savedPosition) ) . So the original page is then scrolling to the top.Expected behavior would be that original-page is staying by "savedPosition".
This Router settings where used:
Additional context
here is the proof that this is working with plain vue router - https://stackblitz.com/edit/vue-8fe51f?file=src/router.js
but I am wondering what's then wrong with NuxtLink ?
Logs
No response
The text was updated successfully, but these errors were encountered: