Vue Router路由切换后页面滚动异常，求强制修正页面尺寸方法

问题核心 #

你遇到的是同路由下Query参数变更时，Vue Router默认不会触发scrollBehavior，导致浏览器保留了旧页面的滚动高度；同时DOM更新（items清空/替换）滞后于路由变更，最终出现滚动条位置异常的情况。

具体解决方案 #

1. 数据更新后手动触发滚动到顶部 #

在接口请求完成、更新items和路由参数后，通过$nextTick确保DOM渲染完成，再强制滚动到页面顶部：

window.api.product.list
  .get(this.request_params)
  .then((data) => {
    // 原有的items更新逻辑
    if (this.page == 1) {
      this.items = data.list;
    } else {
      this.items = [...this.items, ...data.list];
    }

    // 原有的路由参数更新逻辑
    if (!this.initial) {
      if (data.hash) {
        this.$router.push({ query: { hash: data.hash } });
      } else {
        const query = Object.assign({}, this.$route.query);
        delete query.hash;
        this.$router.replace({ query });
      }
      global.appData.dispatch("products/setHash", data.hash);
    }

    // 新增：DOM更新后滚动到顶部
    this.$nextTick(() => {
      window.scrollTo({ top: 0, behavior: "auto" }); // behavior可选'smooth'实现平滑滚动
    });
  });

2. 监听路由Query变化触发滚动 #

在catalogGeneral组件中添加路由监听，当Query参数变化时执行滚动：

export default {
  // ...其他组件选项
  watch: {
    "$route.query": {
      handler() {
        // 等待DOM更新完成后滚动
        this.$nextTick(() => {
          window.scrollTo(0, 0);
        });
      },
      deep: true // 监听Query对象的深层变化
    }
  }
};

3. 在路由守卫中处理同路由滚动 #

修改router.beforeEach，利用next的回调函数（会在路由完成、DOM更新后执行），针对同路由场景强制滚动：

router.beforeEach((to, from, next) => {
  if (to.name == "catalog-categories" && from.name == "catalog-categories") {
    global.appData.commit("products/setDefaults");
    // 用next的回调确保DOM已更新
    next(() => {
      window.scrollTo(0, 0);
    });
  } else {
    global.appData.commit("catalog/changeCurrentPath", to.path);
    next();
  }
});

关键注意点 #

• scrollHeight是只读属性，无法通过赋值修改页面尺寸，调整滚动位置才是正确方向。
• 必须使用$nextTick或next()回调，确保DOM已经渲染了新的items列表后再执行滚动，否则会因为旧DOM高度未更新导致滚动无效。

内容的提问来源于stack exchange，提问作者Sergei Illarionov