vue3通过点击事件跳转路由之后页面滚动到指定位置

可以在路由跳转之前设置一个全局的导航守卫，在导航守卫中获取目标路由的位置信息，然后在路由跳转之后使用 `window.scrollTo()` 方法将页面滚动到指定位置。

示例代码如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 获取目标路由的位置信息
  const position = to.meta.position

  // 如果有位置信息，则在路由跳转之后滚动到指定位置
  if (position) {
    router.app.$nextTick(() => {
      window.scrollTo({
        top: position.top,
        behavior: 'smooth'
      })
    })
  }

  next()
})

在路由配置中可以为每个路由添加一个 `meta` 字段，用于存储位置信息：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      position: { top: 0 }
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      position: { top: 500 }
    }
  }
]

这样，在点击路由链接跳转路由之后，页面就会滚动到指定位置了。