Belajar Vue - Routing & Navigation

#Pendahuluan

Aplikasi dengan satu halaman tidak cukup. Saat kalian butuh halaman beranda, halaman detail produk, dan halaman profil, kalian butuh routing — cara memetakan URL ke komponen. Vue Router adalah router resmi Vue dan tulang punggung navigasi single-page application.

Episode 9 membahas dari dasar: mendefinisikan routes, dynamic dan nested routes, lazy loading agar bundle tetap ramping, scroll behavior dan programmatic navigation, navigation guards, hingga route meta untuk autentikasi per rute.

#Vue Router Dasar

#Install dan Membuat Router

Pasang Vue Router lalu definisikan tabel rute:

npm install vue-router@4

Router dasar

import { createRouter, createWebHistory } from "vue-router";
 
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", name: "home", component: HomeView },
    { path: "/tentang", name: "tentang", component: AboutView },
  ],
});
 
export default router;

createRouter({ history, routes }) membangun router; createWebHistory() memakai HTML5 History API sehingga URL bersih tanpa hash. Daftarkan router ke aplikasi dengan createApp(App).use(router).mount("#app").

#Router View dan Router Link

Template menampilkan rute aktif lewat RouterView, dan navigasi memakai RouterLink:

Navigasi dasar

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/tentang">Tentang</RouterLink>
  </nav>
  <RouterView />
</template>

<RouterLink to="/"> dirender menjadi anchor dengan navigasi client-side tanpa reload, dan <RouterView /> menampilkan komponen rute yang sedang aktif.

#Dynamic dan Nested Routes

#Dynamic Routes

Halaman detail biasanya punya URL seperti /produk/42; param-nya dibaca lewat route.params.id setelah useRoute() dipanggil di komponen:

Dynamic route

const routes = [
  { path: "/produk/:id", name: "detail", component: ProductDetail },
];

Saat param berubah, panggil fetching ulang dengan watch.

#Nested Routes

Route yang berisi sub-halaman diorganisasi dengan children:

Nested routes

const routes = [
  {
    path: "/akun",
    component: AkunLayout,
    children: [
      { path: "", component: AkunHome },
      { path: "pengaturan", component: AkunSetting },
    ],
  },
];

children dirender di dalam AkunLayout melalui <RouterView />. Cocok untuk halaman dengan tab atau sidebar yang layout-nya sama.

#Lazy Loading Komponen Rute

Jangan impor semua halaman sekaligus; gunakan dynamic import agar tiap halaman di-fetch terpisah:

Lazy loading rute

const routes = [
  {
    path: "/produk/:id",
    component: () => import("../views/ProductDetail.vue"),
  },
];

component: () => import(...) memuat halaman hanya saat dibuka, membagi kode per route — fondasi code splitting yang diperdalam di episode 14.

#Navigation Guards dan Programmatic Navigation

#Global Guards

Guard berjalan sebelum navigasi diselesaikan. Contoh paling umum: cek autentikasi:

Global before guard

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLogin()) {
    next({ name: "login", query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

to.meta.requiresAuth membaca meta rute tujuan; jika butuh login, alihkan ke halaman login dengan redirect kembali.

#Programmatic Navigation

Navigasi juga bisa dipicu dari kode dengan useRouter(), misalnya router.push({ name: "detail", params: { id } }) setelah tombol diklik, atau router.back() untuk menyamai tombol kembali browser.

#Scroll Behavior dan Route Props

#Mengontrol Posisi Scroll

Saat pindah halaman, scrollBehavior(to, from, savedPosition) di konfigurasi router mengembalikan posisi scroll: pakai savedPosition saat kembali dari history, atau { top: 0 } untuk navigasi baru.

#Route Props

Agar komponen tidak bergantung useRoute, aktifkan props mode: { path: "/produk/:id", component: ProductDetail, props: true }. Dengan props: true, :id diteruskan langsung sebagai prop id sehingga komponen bersih dan mudah diuji.

#Route Meta dan Autentikasi per Rute

#Meta untuk Kebijakan Per-Rute

Route meta bisa membawa data kebijakan, seperti siapa yang boleh membuka halaman:

Route meta

const routes = [
  {
    path: "/admin",
    component: AdminView,
    meta: { requiresAuth: true, roles: ["admin"] },
  },
];

Guard lalu membaca meta untuk menegakkan kebijakan: jika to.meta.roles tidak memuat role user, arahkan ke halaman forbidden. to.meta.roles.includes(roleUser()) memeriksa apakah role user ada dalam daftar yang diizinkan — dasar role-based access yang dibangun lengkap di episode 12.

#Penutup

Episode 9 membawa kalian dari satu halaman ke aplikasi multi-halaman: definisi routes dengan createRouter, dynamic dan nested routes, lazy loading per rute, programmatic navigation, scroll behavior, route props, serta meta dan guards untuk kebijakan akses per rute.

Inti yang harus dibawa pulang:

• RouterView menampilkan rute; RouterLink menavigasi tanpa reload.
• Dynamic segment :id dibaca lewat route.params.
• children membentuk nested routes dengan layout bersama.
• Lazy load semua halaman dengan () => import(...).
• Guard beforeEach cocok untuk cek autentikasi.
• Route meta menyimpan kebijakan seperti role yang diizinkan.

Di episode 10 selanjutnya kita membahas state management modern — Pinia sebagai store resmi Vue, definisi stores dengan state, getters, dan actions, plugin Pinia, serta best practices untuk normalisasi state dan modular stores pada aplikasi berskala besar.