Membuat Route Bercabang di Vue JS (Nested / Child)

implementasi nested route di vue – Ada kalanya kita merancang path didalam path yang sama di sebuah route. Hal ini disebut route bercabang dimana ada istilah route induk, dan route anak. Kayak gini nih contohnya.

/induk
/induk/anakPertama
/induk/anakKedua
/induk/anakOnda

Dari sisi pemrograman vue route, mungkin terlihat seperti ini (contoh).

routes: [
    {
      path: '/induk',
      name: 'induk',
      component: () => import('./views/Induk.vue'),
    },
    {
      path: '/induk/anakPertama',
      name: 'anakPertama',
      component: () => import('./views/AnakPertama.vue'),
    },
    {
      path: '/induk/anakKedua',
      name: 'anakKedua',
      component: () => import('./views/AnakKedua.vue'),
    },
    {
      path: '/induk/anakOnda',
      name: 'anakOnda',
      component: () => import('./views/AnakOnda.vue'),
    }
]

Itu yakni program yang umum ketika merancang route. akan tetapi hakekatnya, cara tersebut betul-betul kurang tepat sasaran. Kenapa?

1. ‘name’ induk tak dinamis
2. Kalau ada middleware, mesti diimplementasikan di tiap route
3. Kode tak rapih
4. Browser mesti reload ulang tiap views dengan (kemungkinan) ada kode yang duplikat

Cara yang sangat bagus bagi mengerjakan route bercabang seperti ini, yakni dengan mengimplementasikan Nested Route Vue Js.

Baca Pun: Menambah Atribut HTML Secara Kondisional di Vue JS

Apa Itu Nested Route?
Ini yakni teknik routing di vue js yang merancang views dapat menampilkan views lain secara bercabang. Dimana ada views induk, dan views anak.

user selaku Induk, foo selaku contoh parameter, profile dan posts selaku anak

Bagi menggunakan teknik nested route, kita mesti menambahkan children:[] di objek route induk. Dimana children tersebut berisi objek route baru.

Selaku contoh, mari kita coba memperbaiki kode sebelumnya dengan mengimplementasikan nested route. Karenanya akan jadi seperti ini.

routes: [
   {
      path: '/induk',
      name: 'induk',
      component: () => import('./views/Induk.vue'),
      children: [
        {
          path: 'anakPertama',
          name: 'anakPertama',
          component: () => import('./views/AnakPertama.vue'),
        },
        {
          path: 'anakKedua',
          name: 'anakKedua',
          component: () => import('./views/AnakKedua.vue'),
        },
        {
          path: 'anakOnda',
          name: 'anakOnda',
          component: () => import('./views/AnakOnda.vue'),
        }
      ]
    }
]

Kemudian, di component induk (./views/Induk.vue), kita mesti menambahkan </router-view> selaku lokasi bagi menampilkan anak-anaknya.

Dengan begini kode menjadi lebih clean kan? Selain itu, kita pun lebih gampang seandainya ingin menambah middleware atau guard. Lumayan ditambah di route induk aja.

Bagi demo Nested Route agar lebih jelas, silahkan Lihat Demo Disini.

Oke, sekianlah artikel kali ini mengenai cara membuat children route di vue js. Semoga bermanfaat! Terima kasih!