How to implement scroller in vue to return to the page and remember the scroll position

This article mainly introduces the example code for vue scroller to return to the page and remember the scroll position. It is very good and has reference value. Friends in need can refer to

1, set keepAlive: whether Cache

router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}

2, set the rendering page

app.vue

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

3, record the scroll position and assign the value

beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通过vm实例访问this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement default style modification in elementui

How to define your own select based on ng-alain in angular Components?

How to build element-ui (detailed tutorial)

The above is the detailed content of How to implement scroller in vue to return to the page and remember the scroll position. For more information, please follow other related articles on the PHP Chinese website!