vue3router每次跳转回到顶部

Vue3 Router 默认并不会让你的页面滚动到顶部，当你通过 `this.$router.push()` 或者 `this.$router.go()` 进行路由切换时，浏览器会导航到新的 URL，保持当前页面的滚动位置不变。

如果你希望在每次路由切换后都回到顶部，可以在全局或者某个特定的组件中添加一些处理。这里提供一种常见的做法：

1. 使用 Vue 的 `$nextTick` 等待DOM更新完成后再滚动到顶部：

import { useRouter } from 'vue-router'

export default {
  mounted() {
    this.$nextTick(() => {
      window.scrollTo(0, 0);
    });
  },
};

或者在需要的地方使用：

router.beforeEach((to, from, next) => {
  next().then(() => {
    window.scrollTo(0, 0); // 路由切换后立即滚动到顶部
  });
});

2. 如果你想在整个应用中启用这个行为，可以考虑创建一个自定义插件（如 vuex-persistedstate 或者 router-scroll-top）来统一管理。

相关问题

vue3某个路由跳转返回顶部

以下是两种在Vue3中实现路由跳转返回顶部的方法：

1. 在Vue Router中使用beforeEach钩子函数：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0);
  next();
});

export default router;

2. 在组件中使用beforeRouteEnter守卫：

export default {
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  setup() {
    // ...
  }
}

vue3路由跳转返回顶部

在Vue.js中，可以通过配置路由的`scrollBehavior`属性来实现路由跳转返回顶部的效果。具体的实现方式如下所示：

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

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { top: 0 };
  }
});

export default router;

在上述代码中，我们使用了`createRouter`函数创建了一个路由实例，并通过`createWebHistory`函数创建了一个基于浏览器历史记录的路由模式。然后，我们通过`scrollBehavior`属性定义了一个函数，该函数在每次路由切换时会被调用。在这个函数中，我们返回了一个包含`top`属性的对象，将页面滚动到顶部。

需要注意的是，上述代码是基于Vue 3版本的写法。如果你使用的是Vue 2版本，可以参考引用中的代码来实现路由跳转返回顶部的效果。