Nested Route di VueRouter

Sekarang kita akan belajar cara menggunakan nested route di VueRouter. Kadang saat kita membuat website kita perlu nested route. Sebelumnya kita membuat contoh data pegawai dengan 2 tampilan yaitu list pegawai dan detail pegawai. Nah bagaimana jika kita ingin menambah 2 tampilan lagi, misalnya pendidikan dan anggota keluarga. Oke, mari kita coba simak penjelasan berikut ini.

Untuk menjawab masalah sebelumnya, kita memang bisa membuat route dengan path list_pegawai, detail_pegawai, pendidikan_pegawai dan keluarga_pegawai, namun ada cara yang lebih simple untuk melakukan itu. Kita bisa menggunakan yang namanya nested ruote. Cara ini lebih simple karena kita bisa membuat route menjadi:

• pegawai/list
• pegawai/detail
• pegawai/pendidikan
• pegawai/keluarga

Untuk melakukan itu, kita perlu menambahkan children pada route di main.ts. Berikut ini adalah contohnya:

const router: Router = createRouter({
    routes: [
        {
            path: "/",
            component: Home
        },
        {
            path: "/pegawai",
            children: [
                {
                    path: "list",
                    component: ListPegawai
                },
                {
                    path: "detail",
                    component: DetailPegawai
                },
                {
                    path: "keluarga",
                    component: KeluargaPegawai
                },
                {
                    path: "pendidikan",
                    component: PendidikanPegawai
                }
            ]
        },
        {
            path: "/about",
            component: About
        }
    ],
    history: createWebHistory()
});

Perhatikan pada contoh di atas path : “/pegawai” memiliki 4 children, yaitu list, detail, keluarga dan pendidikan. Kita bisa melakukan modifikasi pada component list pegawai agar router linknya mengarah ke url yang sesuai. Untuk contohnya bisa dilihat di bawah ini:

<template>
  <h1>List Pegawai</h1>
  <form @submit.prevent="submit">
    <input type="text" v-model="name">
    <button type="submit">Cari</button>
  </form>
  <table>
    <thead>
      <tr>
        <th>ID Pegawai</th>
        <th>Nama Pegawai</th>
        <th>Aksi</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="pegawai in pegawai">
        <td>{{pegawai.id}}</td>
        <td>{{pegawai.name}}</td>
        <td>
          <RouterLink :to="`/pegawai/detail?id=${pegawai.id}`">Detail</RouterLink>
          <RouterLink :to="`/pegawai/pendidikan?id=${pegawai.id}`">Pendidikan</RouterLink>
          <RouterLink :to="`/pegawai/keluarga?id=${pegawai.id}`">Keluarga</RouterLink>
        </td>
      </tr>
    </tbody>
  </table>
</template>

Nah, RouterLink pada contoh di atas sekarang berubah, menjadi pegawai/detail, pegawai/pendidikan dan pegawai/keluarga.

Children Tanpa Nama

Biasanya, saat membuat aplikasi path yang tidak memiliki children akan mengarah pada list. Jadi pegawai tanpa children path akan diarahkan ke component ListPegawai. Jika ingin seperti itu, kita bisa melakukannya dengan mudah. Kita hanya perlu mengubah children “list” menjadi “”. Contohnya seperti ini:

const router: Router = createRouter({
    routes: [
        {
            path: "/",
            component: Home
        },
        {
            path: "/pegawai",
            children: [
                {
                    path: "",
                    component: ListPegawai
                },
                {
                    path: "detail",
                    component: DetailPegawai
                },
                {
                    path: "keluarga",
                    component: KeluargaPegawai
                },
                {
                    path: "pendidikan",
                    component: PendidikanPegawai
                }
            ]
        },
        {
            path: "/about",
            component: About
        }
    ],
    history: createWebHistory()
});

Nested View menggunakan Nested Route di VueRouter

Selain bisa melakukan nested route di VueRouter, kita juga bisa melakukan nested view yang mengikuti nested route. Misalkan, setiap kita membuka children dari route pegawai, maka dia akan menampilkan header dengan judul manajemen pegawai. Tapi, jika bukan children dari pegawai maka tidak perlu ada header. Untuk itu kita perlu membuat sebuah component view lagi, misalkan kita beri nama ManajemenPegawai dengan source code component seperti ini:

<script setup lang="ts"></script>

<template>
  <h1>Managemen Pegawai</h1>
  <RouterView/>
</template>

<style scoped></style>

Nah, perhatikan pada component di atas kita menambahkan <RouterView/> yang nantinya akan digunakan untuk menampung component children. Untuk routenya kita juga harus mengganti menjadi seperti ini:

const router: Router = createRouter({
    routes: [
        {
            path: "/",
            component: Home
        },
        {
            path: "/pegawai",
            component: ManajemenPegawai,
            children: [
                {
                    path: "",
                    component: ListPegawai
                },

......silahkan diteruskan

Jadi, sebelumnya path “/pegawai” tidak memiliki component. Agar bisa melakukan nested view, kita harus menambahkan component yang kita buat sebelumnya, yaitu ManajemenPegawai. Dengan begitu kita akan mendapatkan tampilan seperti ini:

Oh ya, jangan lupa membuat <h1> pada masing-masing component nested dibuat menjadi <h2> agar lebih terlihat.

Penutup

Nah, demikianlah sedikit penjelasan cara menggunakan nested route pada Vue Router. Caranya cukup mudah bukan? jika kurang jelas, teman-teman bisa melihat dokumentasi resmi Nested Route Vue Router. Selamat mencoba dan selamat belajar.