Mengambil submenu di router.js pada vue

Layouts Sidebar.vue

<ul>
        <li v-for="(item,index) in items" :key="item.path">
          <router-link :to="item.path">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </router-link>
        </li>
      </ul>

  created(){
  this.$router.options.routes.forEach(router => {
      this.items.push({
        name:router.name,
        path:router.path,
        icon:router.icon,
      })
    })
  },

Router

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layouts'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      icon: 'fa fa-home',
      redirect: '/dashboard',
      component: Layout,
      children: [{
        path: '/dashboard',
        name: 'home',
        component: () => import('@/views/Home.vue'),
      }]
    },
    {
      path:'/todo',
      name: 'Todo',
      icon: 'fa fa-user',
      redirect: '/todos',
      component: Layout,
      children: [{
        path: '/todos',
        name: '',
        component: () => import('@/views/Todo.vue'),
      }]
    },
    {
      path:'/profile',
      name: 'Profile',
      redirect: '/nested/menu1',
      children:[
        {
          path: 'menu1',
          component: () => import('@/views/About'), // Parent router-view
          name: 'Menu1',
          meta: { title: 'Menu1' },
          children: [
            {
              path: 'menu1-1',
              component: () => import('@/views/Profile'),
              name: 'Menu1-1',
              meta: { title: 'Menu1-1' }
            },
          ]
        }
      ]
    }

  ]
})

bagaimana cara mendapatkan children didalam children . jika children hanya ada satu dan tidak nested maka itu parent. jika children memiliki nested itu children yang akan diambil dan di masukan ke ul

avatar saepudin2000
@saepudin2000

17 Kontribusi 3 Poin

Diperbarui 4 tahun yang lalu

Tanggapan

halo, biasakan bertanya dengan jelas dan detail ya. Ingin mengambil dimana, ingin ambil yang mana, masaahnya sekarang apa, dan info relevn lainnya

ambil children di dalam children . nanti si children di nested ke ul

1 Jawaban:

Karena idenya mengoper daftar routernya ke suatu "data" coba pakai cara ini:

<pre> data() { return { routes: this.$router.options.routes };

//nge loop di templatenya &lt;nav&gt; &lt;router-link v-for="route in routes" :key="route.path" :to="route.path"&gt; {{route.name}} &lt;/router-link&gt; &lt;/nav&gt; </pre>

nanti di dalam templatenya, untuk children coba di loop lagi aja. dengan v-for="childRoute in route.children"

avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Dipost 4 tahun yang lalu

Tanggapan

Malah kelempar ke Component nya langsung saat mau dropdown klik parent nya. Apa karena saya menggunakan system layouting di router dan tidak langsung lewat komponen. (SPA)

Login untuk ikut Jawaban