The reserved scrolling distance for vue-router is invalid?
question background:
there is a wireless drop-down list on page A, click on a list item and jump to the new page B;
during the return of page B to A, the keep-alive operation is performed on page A, that is, the page is cached, the data of page An is still there, and no new http request is generated, but the scrolling distance returns to the top, not the position previously browsed.
my practice is as follows:
1. The page cache is preserved in app.vue based on conditions.
2.vue-router
saveScrollPosition2.0scrollBehavior
.]
solution?
tips:
(when page B returns to page A, I write console.log in the updated hook of page A ("updated")); discovers that the updated life cycle is executed. But the logic of A page is very complicated. Could it be caused by this updated
normally keep-alive stays in position. The problem I encountered when using keep-alive in my project was that some page returns could be maintained, some could not be maintained, and there was no reason why. Later, there is no way to leave the record position every time, and then scroll to the designated position.
because the drop-down loads more lists, you need to monitor the scrolling of the external div (wrapper) of the package rolling list.
use vuex to record the scrolling status when An operates to B, and B returns to the A page to reset the scrollTop of wrapper to the state of vuex records.
keep-alive caches the state of the original page. 2.0 seems to have added include and exclude, to see if it is a compatibility issue
provides two solutions:
1. If the route is in hash mode, manually record the scrolling position, which can be a window or a DOM element with a scroll bar.
:
// vue-router
const router = new VueRouter({
routes: routes,
mode: 'hash'
});
// vue:
// data0
scroll: 0,
// mounted
mounted() {
ElementScroll.addEventListener('scroll', this.handleScroll);
}
// methods
//
handleScrollInner() {
this.scrollInner = this.fixedElementScrollInner.scrollTop || 0;
},
// window
handleScroll() {
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
}
// keep-aliveactivated
activated() {
if (this.isSticky) {
window.scrollTo(0, this.scroll);
window.addEventListener('scroll', this.handleScroll);
} else {
if (this.$refs.oldPullDown) {
this.fixedElementScroll.scrollTop = this.scroll;
this.fixedElementScroll.addEventListener('scroll', this.handleScroll);
}
}
this.scroll = 0;
},
// deactivated
deactivated() {
window.removeEventListener('scroll', this.handleScroll);
if (this.$refs.oldPullDown) {
this.fixedElementScroll.removeEventListener('scroll', this.handleScroll);
}
}
2. Through the history route pattern provided by vue, this method is simple, but requires back-end cooperation, for existing projects, it is not convenient to modify.
// vue-router2.7
const router = new VueRouter({
mode: 'history',
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return desired position
}
})
// :https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html-sharp%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8
