Ссылка на маршрутизатор vuetify не работает для дочерних ящиков

Question

Я работаю над ящиком vuetify, когда я нажимаю на каждый ящик, он переходит на другую страницу, поэтому я подумал, что было бы круто, если бы я добавил несколько детей к каждому из них, но после этого, когда я нажимаю на каждый дочерний элемент, он перемещается на неправильные страницы.

код ящика перед добавлением детей ... тот, который работает нормально

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),
    }
  },
},

код маршрутизатора

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

код ящика после добавления дочерних элементов

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),
    }
  },
},

вид ящика перед добавлением детей

вид ящика после добавления детей

Я не менял роутер. js файл, единственное, что я сделал, это взял " to: '/ pages / bureau' "с того места, где это было раньше, в детей, но если вы посмотрите на снимок экрана, он перейдет к другой неопределенной ссылке, шаблон, который я использую, есть. https://demos.creative-tim.com/vuetify-material-dashboard/

Answer 1

вам нужно добавить атрибут 'groups' и назначить ему папку для ваших компонентов, в этом случае ваша группа будет 'pages', а ваш атрибут 'to' будет '/ bureau', так что в вашем ящике замените это

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

на это

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