VueJS Router - How do I stop multiple active routes when using sub routes and Vuetify?

12
votes

I am struggling to stop the default '' Home.vue route not be active in Vuetify i.e. when I click uploads or settings the default Home.vue is still active. See here:

enter image description here

I assume it's something to do with it being a sub route of /webapp but I'm banging my head against a wall..

This is the important bit in my routes:

    {
  path: '/webapp',
  name: 'webapp',
  component: () => import('./views/Webapp.vue'),
  children: [
          {
            path: '',
            component: () => import('./components/Home.vue'),
          },
          {
            path: 'uploads',
            component: () => import('./components/Uploads.vue'),
          },
          {
            path: 'settings',
            component: () => import('./components/Settings.vue'),
          }
  ]
}

This is my Vuetify drawer:

<v-navigation-drawer
  v-model="drawer"
  app

>
  <v-list dense>

    <v-list-item
      v-for="item in items"
      :key="item.title"
      :to="item.route"

    >
      <v-list-item-icon>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-icon>

      <v-list-item-content>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

  </v-list>
</v-navigation-drawer>
2
vue.jsvuejs2vue-routervuetify.js

2 Answers

22
votes

You have to add exact (or exact={true}) prop to <v-list-item> component:

<v-list-item
  v-for="item in items"
  :key="item.title"
  :to="item.route"
  exact

></v-list-item>

On v-list-item docs for exact:

Exactly match the link. Without this, '/' will match every route. You can find more information about the exact prop on the vue-router documentation.

You can check that out:

https://vuetifyjs.com/en/components/list-item-groups#list-item-groups

0
votes

Nélio's answer works perfectly, and it also works for the v-list-tile, like:

<v-list dense> 
  <div v-for="(kid, k) in parent.children" :key="k">
     <v-list-tile :to="{path: kid.path}" exact>
         <v-list-tile-title>{{kid.name}}</v-list-tile-title>
     </v-list-tile>
  </div>
</v-list>