Membuat Route Bercabang Di Vue Js (Nested / Child)
implementasi nested route di vue - Ada kalanya kita menciptakan 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.
Dari sisi pemrograman vue route, mungkin terlihat menyerupai ini (contoh).
Itu yakni aktivitas yang umum dikala menciptakan 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 instruksi yang duplikat
Cara yang paling elok untuk melaksanakan route bercabang menyerupai ini, yakni dengan mengimplementasikan Nested Route Vue Js.
Apa Itu Nested Route?
Ini yakni teknik routing di vue js yang menciptakan views sanggup menampilkan views lain secara bercabang. Dimana ada views induk, dan views anak.
Untuk memakai teknik nested route, kita harus menambahkan children:[] di objek route induk. Dimana children tersebut berisi objek route baru.
Sebagai contoh, mari kita coba memperbaiki instruksi sebelumnya dengan mengimplementasikan nested route. Maka akan jadi menyerupai ini.
Kemudian, di component induk (./views/Induk.vue), kita harus menambahkan </router-view> sebagai lokasi untuk menampilkan anak-anaknya.
Dengan begini instruksi menjadi lebih clean kan? Selain itu, kita juga lebih gampang kalau ingin menambah middleware atau guard. Cukup ditambah di route induk aja.
Untuk demo Nested Route biar lebih jelas, silahkan Lihat Demo Disini.
Oke, sekian artikel kali ini wacana cara menciptakan children route di vue js. Semoga bermanfaat! Terima kasih!
Sumber https://teziger.blogspot.com/
/induk /induk/anakPertama /induk/anakKedua /induk/anakOndaBaca Juga
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 aktivitas yang umum dikala menciptakan 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
Cara yang paling elok untuk melaksanakan route bercabang menyerupai ini, yakni dengan mengimplementasikan Nested Route Vue Js.
Baca Juga: Menambah Atribut HTML Secara Kondisional di Vue JS
Apa Itu Nested Route?
Ini yakni teknik routing di vue js yang menciptakan views sanggup menampilkan views lain secara bercabang. Dimana ada views induk, dan views anak.
 |
| user sebagai Induk, foo sebagai pola parameter, profile dan posts sebagai anak |
Sebagai contoh, mari kita coba memperbaiki instruksi sebelumnya dengan mengimplementasikan nested route. Maka akan jadi menyerupai 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 instruksi menjadi lebih clean kan? Selain itu, kita juga lebih gampang kalau ingin menambah middleware atau guard. Cukup ditambah di route induk aja.
Untuk demo Nested Route biar lebih jelas, silahkan Lihat Demo Disini.
Oke, sekian artikel kali ini wacana cara menciptakan children route di vue js. Semoga bermanfaat! Terima kasih!
Sumber https://teziger.blogspot.com/
