vue-router切换路由时，如何实现页面滚动到顶部或保持原先的滚动位置？

实现页面滚动到顶部

要实现页面切换时滚动到顶部，可以在 scrollBehavior 函数中返回 { x: 0, y: 0 }，表示页面滚动到左上角。

示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 };
  }
});

export default router;

在这个例子中，每次路由切换时，页面都会滚动到顶部。

保持原先的滚动位置

要实现页面返回时保持原先的滚动位置，可以利用 savedPosition 参数。savedPosition 是一个对象，包含 x 和 y，表示用户在离开页面时的滚动位置。

示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

export default router;

在这个例子中，如果 savedPosition 存在，表示用户点击浏览器的前进或后退按钮，此时页面会滚动到保存的位置；如果不存在（如用户手动输入 URL 导航），则滚动到顶部。

滚动行为的其他自定义

scrollBehavior 函数还可以根据 to 和 from 参数做进一步的自定义滚动逻辑，例如在某些特殊的路由下设置特定的滚动位置。

示例：

scrollBehavior(to, from, savedPosition) {
  if (to.hash) {
    // 滚动到页面中指定的锚点
    return {
      selector: to.hash
    };
  }
  return { x: 0, y: 0 };
}

在这个例子中，如果路由包含 hash（如 #section），页面会滚动到对应的锚点。否则，滚动到顶部。

通过配置 vue-router 的 scrollBehavior，可以灵活地控制 Vue 应用中的页面滚动行为，提升用户体验。