Home > Article > Web Front-end > 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!