如何将 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>

router.js 文件包含此内容。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        home: Home,
        about: About
      }
    },
    {
      path: '/work',
      name: 'work',
      component: () => import('./views/work/Work.vue')
    }
  ]
})

在 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(target: string | number | HTMLElement | VueComponent, options?: object) => void.

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

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

“英语不是我的母语，请编辑清楚，然后删除此评论！”

首先需要在组件中设置一个id

<about id='about'/>

从按钮调用组件 id

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