滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 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)
  })
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。