vue-cli中使用vue-router切换页面时自动滚动到顶部的方法
解决办法:
在 Vue项目的main.js文件中加入以下代码即可解决:
//页面跳转显示在顶部
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})
有时候这样解决出现的问题:
1.scrollTo方法部分在手机上的部分浏览器不支持,也就是不兼容。
2.用scrollTo方法会在苹果手机浏览器上会产生返回白屏问题
最后总结下来还是利用vue-router自带的滚动行为解决;官网有实例:
在 Vue项目的router文件夹下的index.js文件中加入以下代码即可解决:
//页面跳转显示在顶部
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
以上是本章的全部内容