vue3.0 路由跳转并滚动到指定位置

Vue3.0 中使用路由跳转并滚动到指定位置通常是在组件的生命周期钩子`mounted()`或者在路由守卫（如`beforeEnter`）里完成。你可以结合 Vue Router 的导航守卫功能以及 `Element UI` 或者自定义滚动函数来实现这个需求。

首先，在组件的`mounted()`方法里，添加对某个元素的滚动操作：

export default {
  mounted() {
    this.$nextTick(() => {
      // 假设你想滚动到id为 'target-element' 的元素
      const target = document.getElementById('target-element');
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' }); // 使用 smooth 行为平滑滚动
      }
    });
  },
  //...
}

如果你想在路由变化时自动执行滚动动作，可以设置一个路由守卫，比如 `beforeEnter`：

import { useRouter } from 'vue-router';

export default {
  setup(props, context) {
    const router = useRouter();

    router.beforeEach(async (to, from, next) => {
      await next(); // 先进入下一个视图

      // 检查目标路由是否需要滚动
      if (to.meta.scrollToTop) {
        // 同样找到元素并滚动
        // ...
      }
    });

    return {};
  }
  //...
}

然后在路由配置中为特定的路由设置 `meta` 属性：

{
  path: '/your-path',
  name: 'YourRouteName',
  component: YourComponent,
  meta: { scrollToTop: true }, // 设置这个属性告诉路由守卫需要滚动到顶部
  //...
}