Membuat Route Bercabang di Vue JS (Nested / Child)

implementasi nested route di vue - Ada kalanya kita membuat 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 adalah program yang umum ketika membuat route. Tapi sebenarnya, cara tersebut sangat kurang efektif. Mengapa?

1. 'name' induk tidak dinamis
2. Jika ada middleware, harus diimplementasikan di tiap route
3. Kode tidak rapih
4. Browser harus reload ulang tiap views dengan (kemungkinan) ada kode yang duplikat

Cara yang paling bagus untuk melakukan route bercabang seperti ini, adalah dengan mengimplementasikan Nested Route Vue Js.

Baca Juga: Menambah Atribut HTML Secara Kondisional di Vue JS

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

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

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

Sebagai contoh, mari kita coba memperbaiki kode sebelumnya dengan mengimplementasikan nested route. Maka 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 harus menambahkan </router-view> sebagai lokasi untuk menampilkan anak-anaknya.

Dengan begini kode menjadi lebih clean kan? Selain itu, kita juga lebih mudah jika ingin menambah middleware atau guard. Cukup ditambah di route induk aja.

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

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