Belajar Nuxt - Routing & Navigation

#Pendahuluan

Setiap aplikasi butuh navigasi. Di Nuxt, routing bukan sesuatu yang dikonfigurasi di satu file besar — dia ditentukan oleh struktur folder pages. Buat file, kalian mendapat route; hapus file, route ikut hilang. Ini disebut file-based routing, dan ini salah satu alasan Nuxt terasa sangat cepat untuk dikembangkan.

Episode 4 membahas pola routing secara menyeluruh: route dasar, dynamic routes untuk halaman dengan parameter seperti detail produk, nested routes untuk halaman bertingkat, navigasi antar halaman dengan <NuxtLink>, dan middleware sebagai penjaga rute. Di akhir episode, project belajar-shop akan punya halaman katalog, detail produk, dan keranjang.

#File-Based Routing di Pages

#Setiap File adalah Satu Route

Aturan dasarnya sederhana: file app/pages/about.vue menjadi route /about, dan app/pages/index.vue menjadi halaman utama /. Mari buat tiga halaman dasar toko:

app/pages/produk.vue

<template>
  <section>
    <h1>Katalog Produk</h1>
    <p>Semua produk belajar-shop.</p>
  </section>
</template>

Buka http://localhost:3000/produk dan kalian akan melihat halaman ini tampil. Tidak ada router yang di-register manual — Nuxt membangkitkan route dari nama file.

#Cara Membaca Route Aktif

Untuk membaca informasi route seperti path dan query, gunakan useRoute:

Membaca route aktif

const route = useRoute()
console.log(route.path)

route.path mengembalikan path saat ini, dan route.query berisi objek query string dari URL.

#Dynamic dan Nested Routes

#Dynamic Routes dengan Parameter

Untuk halaman detail yang id-nya berbeda-beda, gunakan kurung siku pada nama file:

app/pages/produk/[id].vue

<script setup lang="ts">
const route = useRoute()
const { data: produk } = await useFetch(`/api/produk/${route.params.id}`)
</script>
 
<template>
  <article>
    <h1>{{ produk?.nama }}</h1>
    <p>{{ produk?.deskripsi }}</p>
  </article>
</template>

File [id].vue menangkap semua route /produk/1, /produk/2, dan seterusnya. Nilai segmen URL bisa dibaca lewat route.params.id. Catatan penting: string di dalam template seperti {{ produk?.nama }} ditulis di template, bukan di prosa.

#Catch-All Routes

Jika ingin menangkap semua segmen di bawah satu path, pakai [...slug].vue. Pola ini berguna untuk halaman dokumentasi atau berita bersarang seperti /dokumen/panduan/pemasangan.

#Nested Routes

Untuk membuat halaman bertingkat dengan bagian yang sama, pakai folder: produk/index.vue untuk /produk dan produk/ulasan.vue untuk /produk/ulasan. Struktur ini membuat URL dan codebase tetap rapi.

#Navigasi dengan NuxtLink

#Link Antar Halaman

Jangan memakai <a> biasa untuk navigasi internal — itu menyebabkan reload penuh. Gunakan <NuxtLink> yang memanfaatkan client-side navigation:

Navigasi dengan NuxtLink

<template>
  <nav>
    <NuxtLink to="/">Beranda</NuxtLink>
    <NuxtLink to="/produk">Produk</NuxtLink>
    <NuxtLink to="/produk/1">Produk Pertama</NuxtLink>
  </nav>
</template>

<NuxtLink to="/produk/1"> merender tag anchor biasa untuk SEO, tapi menangani klik dengan navigasi internal sehingga tidak ada reload penuh. Prefetching link juga otomatis dilakukan — detailnya ada di episode 15.

#Link dengan Parameter Dinamis

Untuk membuat link ke detail produk, gabungkan template literal:

Link dinamis

<NuxtLink :to="`/produk/${produk.id}`">
  Lihat produk
</NuxtLink>

Pola :to="`/produk/${produk.id}`" adalah navigasi dinamis yang umum dipakai saat merender daftar produk dari data.

#Middleware dan Navigation Guards

#Middleware Global dan Per-Rute

Middleware adalah fungsi yang dijalankan sebelum navigasi selesai, biasanya untuk cek autentikasi atau redirect. Ada dua jenis: global yang dipakai di semua halaman, dan per-rute yang dideklarasikan lewat definePageMeta.

app/middleware/auth.global.ts

export default defineRouteMiddleware(() => {
  const token = useCookie("token").value
  if (!token) {
    return navigateTo("/login")
  }
})

File dengan akhiran .global di folder middleware otomatis berjalan untuk semua navigasi. defineRouteMiddleware((to) => {...}) menerima argumen route tujuan, dan navigateTo("/login") menghentikan navigasi lalu mengalihkan ke halaman login.

#Middleware Per-Halaman

Untuk membatasi halaman tertentu, buat middleware bernama lalu daftarkan di halaman:

app/middleware/auth.ts

export default defineRouteMiddleware(() => {
  if (!useCookie("token").value) {
    return navigateTo("/login")
  }
})

Daftarkan di halaman

<script setup lang="ts">
definePageMeta({ middleware: "auth" })
</script>

definePageMeta({ middleware: "auth" }) menghubungkan halaman tersebut dengan middleware auth. Di episode 12 kita akan memperluas pola ini menjadi Role-Based Access Control yang lebih lengkap.

#Penutup

Episode 4 mengajarkan bahasa rute Nuxt: file-based routing yang murah untuk dirawat, dynamic routes dengan parameter untuk halaman data, nested routes untuk struktur bertingkat, <NuxtLink> untuk navigasi yang cepat, dan middleware untuk menjaga akses.

Inti yang harus dibawa pulang:

• Setiap file di pages menjadi satu route secara otomatis.
• Dynamic routes memakai kurung siku, contoh [id].vue, dan dibaca lewat route.params.
• <NuxtLink> adalah cara navigasi internal yang benar karena tanpa reload penuh.
• Middleware global memakai akhiran .global, middleware per-rute didaftarkan lewat definePageMeta.
• navigateTo dari dalam middleware menghentikan dan mengalihkan navigasi.
• Struktur folder pages mencerminkan struktur URL aplikasi.

Di episode 5 selanjutnya kita akan membahas komponen dan layouts — membuat komponen reusable dengan SFC, layouts dan nested layouts untuk kerangka halaman, slots untuk komposisi komponen, serta styling dengan CSS Modules, Tailwind, dan scoped styles. Halaman toko kalian akan mulai tampak utuh.