其他分享
首页 > 其他分享> > 【vue项目问题解决】跳转新路由,滚动距离不变问题

【vue项目问题解决】跳转新路由,滚动距离不变问题

作者:互联网

记录在项目开发过程中遇到的小问题,欢迎大家一起留言探讨

问题

在一个页面中改变scrollTop,再跳转新路由的时候,发现这个滚动距离依旧在

预期结果

在一个页面中改变scrollTop,再跳转新路由的时候,滚动距离变为0

编码实现

在App.vue中监听路由变化

export default {
  watch: {
    $route() {
      // 路由变化的时候,让滚动数据变为0
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
  },
};

项目重启,即可达到预期效果。

标签:vue,滚动,跳转,scrollTop,document,新路
来源: https://blog.csdn.net/qiuqiu1628480502/article/details/120780745