vue3 router 回到顶部

在 Vue 3 中，你可以使用 `router` 对象来实现回到顶部的功能。首先，你需要在你的路由配置文件中添加一个 `scrollBehavior` 的函数。这个函数将被用来控制路由切换时的滚动行为。

在 `scrollBehavior` 函数中，你可以检查目标路由的 `position` 属性，如果它存在并且为真，那么就使用 `window.scrollTo()` 来回到顶部。下面是一个示例：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
  
  scrollBehavior(to, from, savedPosition) {
    if (to.matched.some(record => record.meta.scrollTop)) {
      return { top: 0 };
    }
    
    if (savedPosition) {
      return savedPosition;
    }
    
    return { left: 0, top: 0 };
  }
});

export default router;

在你的路由配置中，你可以为需要回到顶部的路由添加一个自定义的 meta 字段，比如 `scrollTop`。这样，当你切换到这个路由时，`scrollBehavior` 函数就会被触发，然后页面会滚动到顶部。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      scrollTop: true
    }
  },
  // 其他路由配置...
];

这样就可以实现在 Vue 3 中使用 `router` 回到顶部的功能了。希望对你有帮助！如果还有其他问题，请随时提问。