How to run Vuetify.js toolbar title with router

Question

I am using vuetify.js. I wanted to application title to link to top menu. But in /route shop and /discount the HogeHoge button changed toggled state. Is there any way to collect this?

<v-toolbar app>
  <v-toolbar-title class="mr-5">
    <v-btn flat to="/">HogeHoge</v-btn>
  </v-toolbar-title>
  <v-toolbar-items class="hidden-sm-and-down">
    <v-btn flat to="/shop">shop</v-btn>
    <v-btn flat to="/discount">discount</v-btn>
  </v-toolbar-items>
</v-toolbar>

Answer 1

You can do this by simply wrapping it in a router-link.

<v-toolbar app clipped-left>
    <router-link to="/page1">
      <v-toolbar-title>
        🏠 Title
      </v-toolbar-title>
   </router-link>
</v-toolbar>

In Nuxt js you can do like this:

<nuxt-link to="/page1">
    <v-toolbar-title>
        🏠 Title
    </v-toolbar-title>
</nuxt-link>

Answer 2

Simply edit v-toolbar-title tag to include the following:

<v-toolbar-title style="cursor: pointer" @click="$router.push('/')" >