Sometimes this happens. When you enter the details page from the list page, and then click to return, our interface will be called again, and the page will go to the top, so the user experience is very bad. Every time the user has to read from top to bottom, the bottom is Tell everyone how to solve this problem;
Methods provided by Vue
When creating a Router instance, you can provide a scrollBehavior method:
Note: This function is only available in browsers that support history.pushState.
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
The scrollBehavior method receives to and from routing objects. The third parameter savedPosition is only available when popstate navigation (triggered by the browser's forward/back button).
This method will only record the scrolling distance of the page when the body or window scrolls (personally think this is the case, because it has not been successfully used in my project!!!)
Then if my page has top, middle, and bottom It consists of three boxes, the height is set up and down, and the middle can be scrolled. I only want to record the scrolling distance of the middle box. How do I do it? The following is a detailed explanation
because it involves the switching of multiple components, so use vuex to manage this value
export default new Vuex.Store({
state: {
scrollH: 0,
},
mutations: {
scrollChange(state, val) {
state.scrollH = val;
},
})
The scrollChange function is triggered when scrolling
that.$store.commit('scrollChange',scrollTopH);
When returning from the details page to the previous page and want to keep it in the previous position, you can execute it on the page you want to scroll
activated(){
// 等到DOM更新完成之后，然后，执行this.$nextTick，类似于Promise then()
this.$nextTick(() => {
this.$refs.pags.scrollTo(0, this.scrollH);
// this.$refs.pags.scrollTo(0, this.scrollH);
// console.log('你好吗',this.scrollH);
})
},
activated()：
activated() is triggered when entering the page where the activated() function currently exists when the vue object is alive; it can be used to initialize the page data and keepalive cache components and execute the method;
deactivated(): executed when leaving the component;
Note: activated() and deactivated() are only valid when wrapped;
this.$nextTick()
Vue is executed asynchronously when updating the DOM. To wait for Vue to finish updating the DOM after the data has changed, you can use Vue.nextTick(callback) immediately after the data has changed. In this way, the callback function will be called after the DOM update is complete.
If you just want to keep the last state when you come back from the details page, just add a routing guard
//如果不是从详情页进入，则就使滚动高度为0
beforeRouteLeave (to, from, next){
if(to.name!="Detail"){
this.$store.commit("scrollChange",0)
}
next()
},
Note:
the guard inside the component
-
beforeRouteEnter (to, from, next)
No! can! Get the component instancethis, because the component instance has not been created before the guard is executed -
beforeRouteUpdate (to, from, next)
在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this` -
beforeRouteLeave (to, from, next)
导航离开该组件的对应路由时调用，可以访问组件实例 `this`