vuetify router link does not work on drawer children

Question

i am working on vuetify drawer, when i click each drawer it navigates to another page, so i thought that would be cool if i add some children's to each of them, but after that when i click on each children item it navigates into wrong pages.

drawer code before adding children's ... the one that works fine

data: () => ({
  items: [
    {
      icon: 'mdi-view-dashboard',
      title: 'Dashboard',
      to: '/',
    },
    {
      icon: 'mdi-account',
      title: 'First',
    },
    {
      icon: 'mdi-account',
      title: 'Second',
      to: '/pages/mesebo',
    },
  ],
}),

computed: {
  ...mapState(['barColor', 'barImage']),
  drawer: {
    get () {
      return this.$store.state.drawer
    },
    set (val) {
      this.$store.commit('SET_DRAWER', val)
    },
  },
  computedItems () {
    return this.items.map(this.mapItem)
  },
  profile () {
    return {
      avatar: true,
      title: this.$t('avatar'),
    }
  },
},

methods: {
  mapItem (item) {
    return {
      ...item,
      children: item.children ? item.children.map(this.mapItem) : undefined,
      title: this.$t(item.title),
    }
  },
},

router code

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: () => import('@/views/dashboard/Index'),
      children: [
        // Dashboard
        {
          name: 'Dashboard',
          path: '',
          component: () => import('@/views/dashboard/Dashboard'),
        },
        // Pages
        {
          name: 'First',
          path: 'pages/burea',
          component: () => import('@/views/dashboard/pages/Bureau'),
        },
        {
          name: 'Second',
          path: 'pages/mesebo',
          component: () => import('@/views/dashboard/pages/Mesebo'),
        },
      ],
    },
  ],
})

drawer code after adding children

data: () => ({
  items: [
    {
      icon: 'mdi-view-dashboard',
      title: 'Dashboard',
      to: '/',
    },
    {
      icon: 'mdi-account',
      title: 'First',
      children: [
        {
          title: 'sub-first',
          to: '/pages/bureau',
        },
      ],
    },
    {
      icon: 'mdi-account',
      title: 'Second',
      to: '/pages/mesebo',
      children: [
        {
          title: 'sub-second',
          to: '/pages/mesebo',
        },
      ],
    },
  ],
})
computed: {
  ...mapState(['barColor', 'barImage']),
  drawer: {
    get () {
      return this.$store.state.drawer
    },
    set (val) {
      this.$store.commit('SET_DRAWER', val)
    },
  },
  computedItems () {
    return this.items.map(this.mapItem)
  },
  profile () {
    return {
      avatar: true,
      title: this.$t('avatar'),
    }
  },
},

methods: {
  mapItem (item) {
    return {
      ...item,
      children: item.children ? item.children.map(this.mapItem) : undefined,
      title: this.$t(item.title),
    }
  },
},

drawer view before adding children

drawer view after adding children

i did not change the router.js file, the only thing that i have done is taking the "to: '/pages/bureau'" from where it was before into children, but as you look in the screen shot it is going in to another undefined link, the template i am using is. https://demos.creative-tim.com/vuetify-material-dashboard/

Answer 1

what you have to do is, add atribute 'groups' and assign it the folder for your components, in this case your group will be 'pages' and your 'to' attribute will be '/bureau' so on your drawer change this

{
  icon: 'mdi-account',
  title: 'First',
  children: [
    {
      title: 'sub-first',
      to: '/pages/bureau',
    },
  ],
},

into this

{
  icon: 'mdi-account',
  title: 'First',
  group: 'pages',
  children: [
    {
      title: 'sub-first',
      to: '/bureau',
    },
  ],
},