Vue.js 如何向下滚动到其ID作为Vue中的查询参数包含的项目？

如何将页面向下滚动到其ID作为查询参数包含在路由器中的项目？ 我正在使用Vue路由器进行路由。

选项1:Vue路由器的滚动行为 您可以将Vue路由器配置为自动滚动到该元素。此行为适用于所有视图/页面，允许查询任何路由路径

导出默认的新VueRouter({
滚动行为（到、从、保存位置）{
如果（保存位置）{
返回保存的位置；
}
if（to.query&&to.query.id）{
返回{
选择器：'#'+to.query.id，
行为：“平滑”，
}
}
}
})

选项2：监视

$route.query

您可以使用on和on来调用此滚动功能：

弗斯特
第二
导出默认值{
方法：{
滚动到（名称）{
这个.$refs[name]？.scrollIntoView（{behavior:'smooth'}）
},
},
观察：{
“$route.query”（查询）{
if（query.id）{
this.scrollTo（query.id）
}
},
},
}

---

它不适用于动态参照。我正在为refs使用以下结构：：ref=“'item'+item.id”，因为refs附加到循环项。您可以链接到Codesandbox中的复制吗？