1.回到顶部
第一种方法:
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
第二种方法:
在创建router实例时,做如下的配置
savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用
const router = new Router({
base: '/',
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
return { x: 0, y: 0 };
},
});
第三种方法:
找到入口切换路由的页面App.vue文件下,添加watch事件,全局监听路由。
// 使用watch 监听KaTeX parse error: Expected '}', got 'EOF' at end of input: … watch: { 'route’: function(to,from){
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
2.回到原先滚动的位置
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
}