CODEWITHSUNDEEP
vue.jsroutesnavigationsidebar
Weronika
Weronika

Reputation: 330

Navbar selects two drawers at once if one path contains the other in Vue

I'm creating an application in Vue.js with a sidebar.

In v-list-item, in the path :to="link.route", I'm using the names for routes: { name: "dashboard" }.

The problem occurs when the path to one link is contained in a link to the other path.
Eg. path: '/' (dashboard) is contained in path: '/help'.

If I click on Help, then both sidebar drawers are selected:

Two sidebar items

Template:

<template>
  <div>
    <v-navigation-drawer v-model="drawer">
      <v-list nav dense>
        <v-list-item-group>
          <v-list-item
            v-for="link in links"
            :key="link.text"
            :to="link.route">
            <v-list-item-content>
              <v-list-item-title class="white--text">{{
                link.text
              }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

Script:

<script>
export default {
  data: () => ({
    drawer: true,
  }),
  computed: {
    links() {
      return [
        {
          text: "Dashboard",
          route: { name: "dashboard" },
        },
        {
          text: "Help",
          route: { name: "help" },
        },
      ];
    },
  },
};
</script>

Router:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '../views/Dashboard.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'dashboard',
    component: Dashboard
  },
  {
    path: '/help',
    name: 'help',
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Upvotes: 1

Views: 356

Answers (1)

Weronika
Weronika

Reputation: 330

I fixed my problem by adding path { name: "dashboard", path:'/' }in dashboard route declaration.

Code before:

    links() {
      return [
        {
          text: this.$i18n.t("navbar.dashboard"),
          route: { name: "dashboard"},
        },
        {
          text: this.$t("navbar.help"),
          route: { name: "help"},
        },
      ];
    },

Code after:

    links() {
      return [
        {
          text: this.$i18n.t("navbar.dashboard"),
          route: { name: "dashboard", path:'/' },
        },
        {
          text: this.$t("navbar.help"),
          route: { name: "help"},
        },
      ];
    },

It's not exactly what I wanted, but it solves the problem.

Upvotes: 0

Related Questions