背景:在做vue项目时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法:
vue路由跳转时定位到页面顶部的方法
原vue路由跳转时定位到页面顶部的方法汇总2019年04月16日 14:21:55wh_xmy阅读数:106...
·
方式一:
在main.js中添加以下代码即可:
router.beforeEach((to, from, next) => {
// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0
next()
})
或者下面代码:
// 跳转后返回顶部
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})
方式二:如果需要某个页面跳转回顶部,仅需要在当前页面(page)合适的位置加入一下代码即可:
// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0
方式三:在路由的index.js中,加入以下代码也可实现路由改变定位到顶部的效果,savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用,代码如下:
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return {
x: 0,
y: 0
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)