vue单页面如何在后退时返回到上次滚动位置
第一种方法、在main.js里面,此时模式mode要为 history,页面需要设置<keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive> 做缓存const router = new VueRouter({mode: 'hi...
·
第一种方法、在main.js里面,此时模式mode要为 history,页面需要设置
<keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive> 做缓存
const router = new VueRouter({
mode: 'history',
routes,
//滚动到原来位置的方法
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop
}
return { x: 0, y: to.meta.savedPosition || 0 }
}
}
})
第二种方法、在所需要实现的页面中加入
mounted() {
window.CateListScrollTop = 0;
},
beforeRouteLeave (to, from, next) {
//离开该页面的时候把高度记录
window.CateListScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
next()
},
activated() {
//返回的时候滚动到记录的高度
//延时200ms,不延迟滚动的话,有商品页内容高度比较小的情况就返不回原来的位置
setTimeout(() => {
window.scrollTo(0, window.CateListScrollTop);
}, 200);
}
更多推荐
已为社区贡献25条内容
所有评论(0)