vue跳转至本页面的对应位置

在Vue.js中，如果你想要在一个页面内部从一个路由跳转到另一个位置，并保持当前页面的部分内容滚动到相应的位置，可以使用`this.$router.push()`配合`scrollBehavior`选项。首先，在你的`router.js`配置文件里设置`scrollBehavior`：

import router from './router'
import { saveScrollPosition } from '@/utils'

// 在全局路由守卫中保存滚动位置
router.options.scrollBehavior = async (to, from, savedPosition) => {
  if (savedPosition) {
    // 如果有保存的滚动位置，则直接滚动到该位置
    window.scrollTo(savedPosition.x, savedPosition.y)
  } else {
    // 否则，默认滚动到顶部
    return { x: 0, y: 0 }
  }
}

// 在需要的地方保存滚动位置
export const saveRouteScroll = (el) => {
  router.app.$nextTick(() => {
    router.saveScrollPosition({
      el,
      offset: { top: 0, left: 0 }, // 可选偏移量
    })
  })
}

// 当路由改变时，自动保存当前位置
router.beforeEach((to, from, next) => {
  saveRouteScroll(document.body) // 或者某个特定元素
  next()
})

然后，在需要跳转的地方，你可以这样做：

this.$router.push({ name: 'your-target-route', query: { scroll: true } }) // 设置scroll参数标记需要保存滚动位置

// 在路由组件中接收并处理scroll参数
created() {
  if (this.$route.query.scroll) {
    this.$nextTick(() => {
      this.$router.app.scrollTo(this.$route.query.position || { x: 0, y: 0 }) // 这里的position是你的目标元素的hash值或offsetTop
    });
  }
}

当你点击按钮或者其他链接触发跳转时，目标页面会记住之前的滚动位置，并在加载完成后滚动到那个位置。