vue 路由跳转回到顶部

### 解决 Vue 路由跳转后页面回到顶部

为了实现路由跳转后的页面滚动位置重置至顶部，在创建 `VueRouter` 实例时可以配置 `scrollBehavior` 方法。此方法允许开发者指定当导航发生时应如何调整滚动位置。

对于基于 Vue 2.x 版本的应用程序，通过如下方式设置：

const router = new VueRouter({
  routes: [
    // 定义的路由...
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

而在 Vue 3 中，推荐的做法略有不同，采用的是 `createRouter` 函数来初始化路由器对象，并同样可以在其中定义 `scrollBehavior` 属性[^4]：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 配置好的路由列表...
  ],
  scrollBehavior() {
    return { top: 0 }; // 总是让新的视图从最上方开始显示
  },
});

另外一种思路是在 `<router-view>` 组件上添加唯一的键值 (`key`) 来触发组件销毁重建的效果，从而达到刷新的目的[^5]。不过这种方法不如直接利用 `scrollBehavior` 更加优雅高效。

值得注意的是，如果希望仅在特定条件下执行这种行为（例如只针对某些路径），那么可以在 `scrollBehavior` 内部加入逻辑判断以满足需求。