vue路由跳转后页面未置顶显示

博客讲述了在Vue应用中遇到路由跳转后页面未置顶显示的问题,尝试了两种解决方案。首先尝试在全局路由守卫router.beforeEach中设置页面定位,但因过于繁琐而放弃。接着采用Vue Router官方提供的方法,通过异步处理页面过渡事件,成功实现了路由切换时页面滚动到顶部的效果,从而解决了问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在登录页面输入用户名和密码之后跳转到主页面,浏览器可视区域上部显示的不是主页面的header部分,后来发现无论从哪一页面跳转到主页面,显示的都不是页面的header。
此时解决问题的思路就很明了了
就问题而言,在路由跳转时或者后,把页面定位设置成 x: 0, y: 0

第一种想法:
在路由的全局导航守卫router.beforeEach添加

window.scrollTo(0,0)

但是没好用,我得在路由元中meta添加一个title属性,然后用 document.title=to.meta.title修改当前页面的title,麻烦,直接弃掉

第二种想法(官网提供方法):
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
 }

简单的用法并没有实现,得用异步处理:将其挂载到从页面级别的过渡组件的事件上,令其滚动行为和页面过渡一起良好运行

scrollBehavior (to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 0 })
      }, 5)
    })
  }

ok了,问题解决!!

总结:
在第一种想法中,虽然最终我没有应用,但是最终我实践过,方法可行。代码写的时间久了,一些问题根据表现的形式就可以判断出问题的所在,这又是自身进步的表现吧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值