900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue项目 路由跳转页面后滚动条自动回到顶部

vue项目 路由跳转页面后滚动条自动回到顶部

时间:2022-05-14 14:38:03

相关推荐

vue项目 路由跳转页面后滚动条自动回到顶部

一,现象

假设有两个页面,A和B。

当A页面很长时,我们在访问A页面时滚动条滚动到底部,这时候跳转到B页面,滚动条将不会变动,也就是B页面的滚动条还是在底部

二,原因

因为我们使用vue开发项目时,通常是使用vue-router路由来完成页面的跳转,而通常页面的布局如下分为header,aside,main,footer等部分,我们路由跳转只是不断地切换main中的内容罢了。

按f12查看,就可以看到,滚动条实际上是document.body上面的,也就是说,我们路由跳转时,滚动条压根就不受影响。所以才会出现这个问题。

三,解决方案

既然是body上的,那么我们只要在路由跳转时手动把滚动条的位置设置到顶部不就好了嘛!

于是有这段代码:

document.body.scrollTop = 0// firefox浏览器中是这句document.documentElement.scrollTop = 0

但是问题又来了,我怎么知道啥时候路由跳转呢?

vue-router有个全局路由导航,可以拦截所有的路由跳转:

const router = new Router({routes: [{path: '/login',name: 'login',component: login},})router.beforeEach((to, from, next) => {document.body.scrollTop = 0// firefoxdocument.documentElement.scrollTop = 0next()})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。