Vue Router Dasar — Vue

Setup Router const router = createRouter({ routes: [ { path: "/", component: Home }, { path: "/about", component: About }, { path: "/users/:id", component…

Vue Router mencocokkan alamat di URL dengan komponen yang harus tampil, jadi satu aplikasi bisa punya banyak "halaman" tanpa meminta halaman baru ke server. Aplikasi seperti ini disebut SPA (single-page application): cuma satu file HTML, dan JavaScript yang menukar isinya. Bayangin papan menu besar Warung Bu Sri yang panelnya bisa dibalik. Pembeli menyebut "menu nomor 2", dan Bu Sri cukup membalik panelnya ke Mie Ayam. Warungnya gak dibangun ulang, dan pembeli gak perlu keluar lalu masuk lagi. Nomor yang disebut pembeli itu URL, Bu Sri yang mencocokkan nomor dengan panel itu router, dan bingkai tempat panelnya terpasang itu <RouterView />.

🧪 Tebakan cepat: Di /menu/2 (Mie Ayam), komponen DetailMenu mengambil menunya di onMounted. Ada link "Menu berikutnya" ke /menu/3. Diklik, URL-nya jadi /menu/3. Judulnya berubah jadi Es Teh atau tetap Mie Ayam? Tebak dulu, jawabannya ada di bagian "Komponen yang sama dipakai ulang".

Routes: path ke komponen

// src/router/index.js
import { createRouter, createWebHistory } from "vue-router"
import Beranda from "../views/Beranda.vue"
import DaftarMenu from "../views/DaftarMenu.vue"

const routes = [
  { path: "/", component: Beranda },
  { path: "/menu", component: DaftarMenu },
  { path: "/menu/:id", component: () => import("../views/DetailMenu.vue") },
  { path: "/:pathMatch(.*)*", component: () => import("../views/TidakDitemukan.vue") },
]

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

RouterLink dan RouterView

<!-- App.vue -->
<template>
  <nav>
    <RouterLink to="/">Beranda</RouterLink>
    <RouterLink to="/menu">Menu</RouterLink>
  </nav>
  <RouterView />
</template>

Di /menu, link Menu dirender jadi <a href="/menu" class="router-link-active router-link-exact-active" aria-current="page">Menu</a>.

Klik URL <RouterView /> menampilkan Dimuat ulang dari server?
buka aplikasi / Beranda ya, sekali
RouterLink Menu /menu DaftarMenu gak
RouterLink Mie Ayam /menu/2 DetailMenu gak

Parameter route: /menu/:id

<!-- DetailMenu.vue -->
<script setup>
import { useRoute, useRouter } from "vue-router"

const route = useRoute()
const router = useRouter()

console.log(route.params.id)   // di /menu/2: "2", teks

function kembali() {
  router.push("/menu")
}
</script>

Komponen yang sama dipakai ulang

Dari /menu/2 ke /menu/3, route yang cocok tetap /menu/:id, jadi Vue Router memakai ulang DetailMenu yang sudah ada. Komponennya gak dibuat ulang, dan onMounted gak jalan lagi. URL dan route.params.id sudah 3, tapi judulnya tetap Mie Ayam. Itu jawaban tebakannya. Awasi parameternya:

const menu = ref(null)

watch(() => route.params.id, (id) => {
  menu.value = daftarMenu.find((m) => m.id === Number(id))
}, { immediate: true })
Kejadian route.params.id Judul tanpa watch Judul dengan watch
buka /menu/2 "2" Mie Ayam Mie Ayam
klik Menu berikutnya "3" Mie Ayam Es Teh

Halaman 404

Tanpa route yang cocok, misalnya /minuman, <RouterView /> gak menampilkan apa-apa. Build development menulis [Vue Router warn]: No match found for location with path "/minuman". Route { path: "/:pathMatch(.*)*", component: TidakDitemukan } cocok dengan alamat apa pun yang gak ditangkap route lain, jadi alamat nyasar mendapat halaman 404 sendiri.

Di editor latihan

Editor latihan memuat Vue Router asli (versi 4.5.1) begitu kodemu memakai createRouter. Dua bedanya dengan proyek Vite: editor ini gak punya main.js, jadi router yang dibuat createRouter langsung dipasang ke app-nya, seperti app.use(router). Pratinjau juga gak punya address bar, jadi createWebHistory() di sana menyimpan riwayat alamatnya di memori dan selalu mulai dari /.

Mengklik <a href="/about"> biasa di pratinjau gak membuka apa-apa: editor mencegah bingkainya pindah alamat dan menulis pesan di console. Di aplikasi sungguhan, link seperti itu memuat ulang seluruh halaman, persis yang dicegah RouterLink.

📌 Navigation guard

router.beforeEach dijalankan sebelum setiap perpindahan. Kembalikan false untuk membatalkan, alamat lain untuk mengalihkan, atau gak mengembalikan apa-apa untuk lanjut:

router.beforeEach((to) => {
  if (to.path === "/bayar" && !sudahMasuk.value) return "/masuk"
})

⚠️ Jebakan yang sering ketemu

TL;DR: Vue Router mencocokkan URL dengan komponen. createRouter({ history: createWebHistory(), routes }) dengan routes berisi { path, component }, lalu app.use(router). <RouterLink to="/menu"> berpindah tanpa memuat ulang halaman, dan <RouterView /> menampilkan komponen yang cocok. /menu/:id memberi route.params.id berupa teks lewat useRoute(); useRouter() untuk router.push(). Pindah dari /menu/2 ke /menu/3 memakai ulang komponen yang sama, jadi awasi parameternya dengan watch. Route /:pathMatch(.*)* menangkap alamat yang gak dikenal.

Yang akan kamu pelajari