滚动行为

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

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      meta: {
        requiresAuth: true,
        transition: "slideLeft",
      },
      component: () => import("../views/home/home.vue"),
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../views/about/about.vue"),
      meta: {
        requiresAuth: false,
        transition: "slideRight",
      },
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

export default router;

当然，也可以进行延迟滚动

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        if (savedPosition) {
            return savedPosition;
        } else {
            return { top: 0 };
        }
     }, 500)
  })
}