Sekarang kita akan belajar cara menggunakan route param dengan Router Vue. Route Param ini penting dan cukup sering kita gunakan. Jika router mengaitkan url dengan component, maka route param adalah parameter pada url yang bisa kita akses dari component yang kita buat. Cara menggunakan route param juga cukup mudah. Untuk lebih jelasnya simak materi ini sampai habis ya.
Persiapan Data Contoh
Untuk belajar, kita akan langsung membuat contoh membuat route param dengan router vue. Misalkan kita punya halaman admin yang menampilkan daftar pegawai. Ketika kita klik detail, maka akan muncul detail informasi pegawai. Nantinya kita akan memanfaatkan route param untuk mendapatkan id pegawai. Oke, mari kita coba. Sebelumnya kita perlu membuat data list pegawai dengan json seperti berikut ini:
[
{
"id": 1,
"name": "Adi",
"address": "Ambon"
},
{
"id": 2,
"name": "Budi",
"address": "Bogor"
},
{
"id": 3,
"name": "Cici",
"address": "Cikarang"
},
{
"id": 4,
"name": "Didi",
"address": "Denpasar"
}
]Simpan json tersebut di public/api/pegawai.json. Selanjutnya kita buat component dengan nama ListPegawai yang akan menampilkan data pegawai tersebut:
<script setup lang="ts">
import {ref, watchEffect} from "vue";
const pegawai = ref([]);
watchEffect(async () => {
try {
const response = await fetch('/api/pegawai.json');
pegawai.value = await response.json();
} catch (error) {
console.log("Terjadi kesalahan");
}
});
</script>
<template>
<h1>List Pegawai</h1>
<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="`/detail_pegawai/${pegawai.id}`">Detail</RouterLink></td>
</tr>
</tbody>
</table>
</template>
<style scoped>
table, tr, td, th {
border: 1px solid #ccc;
}
</style>Pada script di atas kita memanggil data dalam watchEffect. Detail pegawai akan dinavigasi oleh RouterLink yang ditujukan ke /detail_pegawai/${pegawai.id} nanti kita buatkan router-nya untuk itu. Sebelum kita buat routernya, kita buat component untuk menampilkan pegawai dengan nama DetailPegawai seperti ini:
<script setup lang="ts">
import {reactive, ref, watchEffect} from "vue";
import {useRoute} from "vue-router";
const route = useRoute();
const id = ref(route.params.id);
const detailPegawai = reactive({});
const found = ref(false);
watchEffect(async () => {
const response = await fetch('/api/pegawai.json');
const pegawai = await response.json();
const foundPegawai = pegawai.find(p => p.id == id.value);
if (foundPegawai) {
Object.assign(detailPegawai, foundPegawai);
found.value = true;
} else {
found.value = false;
}
});
</script>
<template>
<h1>Detail Pegawai, ID = {{id}}</h1>
<div v-if="found">
ID: {{detailPegawai.id}}<br>
Name: {{detailPegawai.name}}<br>
Address: {{detailPegawai.address}}<br>
</div>
<div v-else>
Pegawai tidak ditemukan
</div>
</template>
<style scoped>
</style>Pada contoh di atas, detail pegawai tidak diakses satuan melainkan diakses semua terlebih dahulu baru kita ambil yang id-nya sesuai. id pegawai tersebut diambil dari route param dengan cara membuat variable route = useRoute(). Selanjutnya kita mengambil id dengan route.params.id. Karena pegawai dengan id tertentu belum tentu ada maka kita buat state untuk melihat apakah data pegawai tersedia. Nantinya, jika data pegawai tidak ada maka component akan menampilkan tulisan “Pegawai tidak ditemukan”.
Perlu Router untuk Menggunakan Route Param
Setelah membuat 2 component ListPegawai dan DetailPegawai, sekarang kita buat routernya seperti ini.
import { createApp } from 'vue';
import {createRouter, createWebHistory, type Router} from "vue-router";
import App from './App.vue';
import About from "./components/About.vue";
import ListPegawai from "./views/ListPegawai.vue";
import Home from "./components/Home.vue";
import DetailPegawai from "./views/DetailPegawai.vue";
const router: Router = createRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/list_pegawai',
component: ListPegawai
},
{
path: '/detail_pegawai/:id',
component: DetailPegawai
},
{
path: '/about',
component: About
}
],
history: createWebHistory()
});
const app: any = createApp(App);
app.use(router);
app.mount('#app');Pada router di atas /list_pegawai terkait dengan component ListPegawai dan /detail_pegawai/:id terkait dengan component DetailPegawai. Nah, :id inilah yang disebut dengan route param. Kita bisa memanggilnya dengan route.params.id. Setelah router dibuat, jangan lupa untuk mengubah App.vue menjadi seperti ini:
<script setup lang="ts">
</script>
<template>
<div>
<RouterLink to="/" class="nav">Home</RouterLink>
<RouterLink to="/list_pegawai" class="nav">List Pegawai</RouterLink>
<RouterLink to="/about" class="nav">About</RouterLink>
</div>
<RouterView/>
</template>
<style scoped>
.nav {
border: 1px solid #888888;
padding: 5px;
border-radius: 5px;
margin-left: 5px;
}
.nav:hover {
background-color: #a8a8a8;
color: white;
}
</style>Jika berhasil kita akan mendapatkan tampilan seperti di bawah ini ya.
Route Query
Selain menggunakan path variable detail_user/:id, kita biasanya juga menggunakan route query. Misalnya kita bisa menggunakan detail_user?id=1. Kita juga bisa mengambil route query dengan cara yang hampir mirip. Hanya perlu mengganti params menjadi query. Untuk lebih jelasnya mari kita coba ubah contoh sebelumnya menggunakan route query. Pertama, kita harus mengubah route di main.ts dari
{
path: "/detail_pegawai/:",
component: DetailPegawai
},menjadi
{
path: "/detail_pegawai",
component: DetailPegawai
},Selanjutnya kita mengubah script pada component DetailPegawai dari:
const id = ref(route.params.id);menjadi
const id = ref(route.query.id);Nah, jadi sesimple itulah ketika kita ingin mengubah path variable menjadi route param.
Penutup
Nah, demikianlah cara menggunakan route param dengan vue router. Cukup mudah bukan? Jika teman-teman masih kurang jelas dengan penjalasan di atas, teman-teman bisa mempelajari dokumentasi resmi vue router. Selamat mecoba, semoga bermanfaat.
