vue-router中的scrollBehavior，返回循环数据的位置

Question

我在返回页面之间的相同滚动位置时遇到了一些问题。问题是我正在迭代数据

<template>
    <router-link class="type-atag" v-for="item in types" :key="item.id" :to="{name:'plan_detail', params:{pid:item.id}}">
       <ul class="flex align-ver align-hor column type-btn">
          <li class="btn-item">{{item.kind}} <span>{{item.menu}}</span></li>
          <li class="btn-item">{{item.type}}</li>
       </ul>
    </router-link>
</template>

用户进入点击id的详情页面。然后再次回到主框架。但正如您所愿，我不想再次显示页面顶部。所以我尝试使用 vue-router 的scrollBehavior() 但有一个hash 的问题。因为不能给#id的迭代数据……

解决此问题的最佳方法是什么？例如有没有办法可以滚动到item.id

Answer 1

如果item组件已经拿到id，你可以写一个滚动的方法，在mounted hook中调用。

  goTo(id) {
          const position = document.getElementById(id).offsetTop;
          // smooth scroll
          window.scrollTo({ top: position, behavior: "smooth" });  
   }

如果你使用的是 vue 参考

goTo(id) {
          const position = this.$refs[id][0].$el.offsetTop;
          // smooth scroll
          window.scrollTo({ top: position, behavior: "smooth" });  
   }