CODEWITHSUNDEEP
javascriptvue.jstoolbarvuetify.js
user2850652
user2850652

Reputation: 179

How to run Vuetify.js toolbar title with router

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>

Upvotes: 10

Views: 14264

Answers (6)

tonhozi
tonhozi

Reputation: 450

Here is how I solved it. I followed a mix of vuetify and vue-router official documentation.

<v-toolbar-title style="cursor: pointer">
    <router-link v-slot="{navigate}" :to="{ name:'Home' }" custom>
      <span role="link" @click="navigate" @keypress.enter="navigate">
        Home
      </span>
    </router-link>
  </v-toolbar-title>

It is important to highlight some things on this answer:

  1. <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link
  2. Using span instead of nothing removes issues with formatting.
  3. This also removes the warning about NavigationDuplicated from vue-router.

Upvotes: 0

richardwhatever
richardwhatever

Reputation: 5153

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

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

Upvotes: 7

Adik
Adik

Reputation: 101

<router-link to="/home" tag="div" class="v-toolbar__title">Home</router-link>

And you can do it with any element. Just you need to know which vuetify class name you should use.
If you dont know what class name is it just at first try implement normal element which will be a router link.

<v-toolbar-title>Title</v-toolbar-title>

Open your dev tools browser and copy class name (and tag also). enter image description here
Now you can do the trick with router link.

Upvotes: 2

Dmitry Kaltovich
Dmitry Kaltovich

Reputation: 2280

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>

Upvotes: 4

user2850652
user2850652

Reputation: 179

I could self solve this. Doing active-class noting to root route.

https://github.com/vuetifyjs/vuetify/issues/1947

Upvotes: 0

pirmax
pirmax

Reputation: 2153

You can add exact as prop, as:

<v-btn flat to="/shop" exact>shop</v-btn>
<v-btn flat to="/discount" exact>discount</v-btn>

Upvotes: 3

Related Questions