vuetify router link does not work on drawer children - vuetify.js

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',
},
],
},