How to Pass a VueComponent to the $vuetify.goTo() method?

Question

i have 3 view components named home, about & work. in App.vue file

<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 file contains this.

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

in About.vue file

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

and in ToolBar.vue file

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

let's say i'm in the '/' route (path) and i clicked the about button in toolbar. It then scroll down to About component as expected. What i want is to do when i am on route '/work' and clicked the about button, go to home page '/' and scroll down to the about section.

In vuetify documentation, it says goTo(target: string | number | HTMLElement | VueComponent, options?: object) => void.

My first question is that how to Pass a Vue Component as an argument to the goTo method target parameter?

Second question is that if this is the best way to achieve the behavior i wanted? if not how to get the result i expected?

"English is not my first language, please edit for clarity, then remove this comment!"

Answer 1

First you need to set an id in the component

<about id='about'/>

from the button call the component id

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