Vue.js 如何将VueComponent传递给$vuetify.goTo（）方法？

我有3个视图组件，分别名为home、about和work。在App.vue文件中

<v-app>
    <ToolBar />
    <v-content>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view> </router-view>
    </v-content>
</v-app>

在About.vue文件中

<template>
    <div id="about">
        <v-container>
            ....
        </v-container>
    </div>
</template>

....

在ToolBar.vue文件中

<v-btn @click="$vuetify.goTo('#about', options)">About</v-btn>

关于

假设我在“/”路线（路径）中，我单击了工具栏中的“关于”按钮。然后按预期向下滚动至“关于组件”。我想做的是，当我在路线“/work”上并单击“关于”按钮时，转到主页“/”并向下滚动到“关于”部分

在vuetify文档中，它表示

goTo（目标：string | number | HTMLElement | VueComponent，options？：object）=>void

我的第一个问题是，如何将Vue组件作为参数传递给goTo方法目标参数

第二个问题是，这是否是实现我想要的行为的最佳方式？如果不是的话，如何得到我期望的结果

---

“英语不是我的第一语言，请编辑以保持清晰，然后删除此注释！”

首先，您需要在组件中设置id

<about id='about'/>

从按钮调用组件id

<v-btn @click="$vuetify.goTo('#about')">About</v-btn>

关于

<v-btn @click="$vuetify.goTo('#about')">About</v-btn>