vue router

📚 Artikel 10 dari 16 · Seri Vue from Zero to Zorro

Vue Router — Bikin Aplikasi Multi-Halaman dengan Navigasi yang Mulus Tanpa Reload

Pernah kesal karena setiap pindah halaman browser nge-refresh dan bikin pengalaman pengguna terasa kaku? Vue Router hadir untuk menyelesaikan masalah itu — sekali dan untuk selamanya.

#VueRouter #RoutingVue3 #BelajarVue #VueFrontEnd #SPA

⏱ 12

menit baca

🎯 Pemula

level

📅 2026

updated

Bayangkan kamu lagi belanja di sebuah mal. Setiap kali mau pindah ke toko lain, kamu harus keluar dari mal, bongkar semua barang bawaan, lalu masuk lagi dari pintu depan. Aneh banget, kan? Sayangnya, itulah yang terjadi di website tradisional setiap kali pengunjung pindah halaman — browser me-refresh seluruh halaman dari nol. Nah, Vue Router hadir untuk mengubah itu semua. Dengan routing Vue 3, kamu bisa bikin aplikasi web multi-halaman yang navigasinya se-mulus aplikasi mobile — tanpa reload, tanpa loading ulang yang bikin frustrasi. Di artikel ke-10 dari seri Vue from Zero to Zorro ini, kita akan bedah tuntas cara kerja Vue Router dari nol sampai kamu bisa langsung praktikkan.

💎 KONSEP KUNCI

Vue Router adalah library resmi Vue.js yang memungkinkan kamu membangun Single Page Application (SPA) — aplikasi yang secara teknis hanya memuat satu halaman HTML, tapi terasa seperti punya banyak halaman karena kontennya diganti secara dinamis menggunakan JavaScript, tanpa memuat ulang seluruh halaman.

🗺️ Apa Itu Vue Router dan Kenapa Kamu Butuh Routing Vue 3?

Sebelum Vue Router hadir, developer harus repot bikin sistem navigasi sendiri — ribuan baris kode hanya untuk pindah-pindah tampilan. Vue Router menyederhanakan semuanya jadi konfigurasi yang elegan dan deklaratif.

Analoginya begini: kalau aplikasi Vue-mu adalah sebuah buku, maka Vue Router adalah daftar isinya. Kamu mendefinisikan "bab mana yang tampil ketika URL tertentu diakses", dan Vue Router yang mengurus sisanya — termasuk animasi transisi, history browser, dan parameter dinamis.

🔥 FAKTA MENARIK

Hampir semua aplikasi besar berbasis Vue — termasuk GitLab, Alibaba, dan Nintendo — menggunakan Vue Router untuk mengelola navigasi. Bukan karena terpaksa, tapi karena memang tidak ada yang lebih cocok untuk ekosistem Vue.

Fitur	Tanpa Vue Router	Dengan Vue Router
Navigasi halaman	❌ Full page reload	✅ Instan, tanpa reload
Tombol Back/Forward	❌ Tidak berfungsi dengan baik	✅ Bekerja sempurna
URL yang readable	❌ Harus bikin sendiri	✅ Otomatis & terstruktur
Route dinamis (/user/:id)	❌ Kompleks dan rawan bug	✅ Built-in, mudah dikonfigurasi
Guard navigasi	❌ Tidak ada	✅ Lengkap (beforeEach, dll)

⚙️ Cara Instalasi dan Konfigurasi Vue Router di Proyek Vue 3

Oke, cukup teorinya. Sekarang kita masuk ke bagian yang paling seru: praktik langsung! Berikut adalah langkah-langkah step-by-step untuk mengintegrasikan Vue Router ke proyek Vue 3 kamu.

1

Install Vue Router via npm

# Buat proyek baru (skip jika sudah ada)
npm create vite@latest my-app -- --template vue
cd my-app

# Install Vue Router 4 (untuk Vue 3)
npm install vue-router@4

2

Buat File Komponen Halaman

Buat folder src/views/ dan isi dengan dua komponen halaman sederhana:

<template>
  <div>
    <h1>🏠 Halaman Beranda</h1>
    <p>Selamat datang di aplikasi Vue pertamamu!</p>
  </div>
</template>

<template>
  <div>
    <h1>👤 Tentang Kami</h1>
    <p>Halaman about yang keren!</p>
  </div>
</template>

3

Konfigurasi Router di src/router/index.js

Ini adalah jantung dari seluruh sistem routing-mu. Buat file baru:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

const router = createRouter({
  history: createWebHistory(), // URL bersih tanpa tanda #
  routes
})

export default router

4

Daftarkan Router ke Aplikasi di main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router) // ← cukup satu baris ini!
  .mount('#app')

5

Gunakan <RouterView> dan <RouterLink> di App.vue

<!-- src/App.vue -->
<template>
  <nav>
    <!-- RouterLink menggantikan tag <a> biasa -->
    <RouterLink to="/">🏠 Home</RouterLink>
    <RouterLink to="/about">👤 About</RouterLink>
  </nav>

  <!-- Di sinilah halaman aktif dirender -->
  <RouterView />
</template>

💡 TIPS

<RouterLink> secara otomatis menambahkan class router-link-active pada link yang sedang aktif. Manfaatkan ini untuk styling navigasi yang dinamis tanpa JavaScript tambahan!

🚀 Fitur Lanjutan Vue Router yang Wajib Kamu Tahu

Setelah routing dasar berjalan, saatnya naik level! Vue Router punya segudang fitur canggih yang akan membuat aplikasimu makin profesional.

📌 1. Dynamic Route — URL dengan Parameter

Kebayang nggak kalau kamu harus bikin route terpisah untuk setiap profil user? /user/budi, /user/ani, /user/siti... bisa ribuan route! Dynamic route menyelesaikannya dengan elegan:

// Di router/index.js — satu route untuk semua user!
{
  path: '/user/:id',
  name: 'user',
  component: UserView
}

// Di komponen UserView.vue — ambil nilai parameter
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id) // Output: "budi", "ani", dll

🪆 2. Nested Routes — Halaman di Dalam Halaman

Analoginya seperti folder di dalam folder. Misalnya /dashboard punya sub-halaman /dashboard/profile dan /dashboard/settings.

{
  path: '/dashboard',
  component: DashboardView,
  children: [
    {
      path: 'profile',   // /dashboard/profile
      component: ProfileView
    },
    {
      path: 'settings',  // /dashboard/settings
      component: SettingsView
    }
  ]
}

🔐 3. Navigation Guards — Penjaga Pintu Halaman

Ini adalah fitur krusial untuk proteksi halaman. Misalnya, hanya user yang sudah login yang boleh masuk ke dashboard.

// Di router/index.js
router.beforeEach((to, from) => {
  const isLoggedIn = localStorage.getItem('token')
  
  if (to.name === 'dashboard' && !isLoggedIn) {
    // Kalau belum login, paksa ke halaman login
    return { name: 'login' }
  }
})
// Kalau sudah login, lanjut ke halaman tujuan

⚡ INSIGHT PENTING

Di Vue 3, kamu bisa mengakses router dan route secara programatik menggunakan dua composable: useRouter() untuk navigasi (push, replace) dan useRoute() untuk membaca informasi route aktif (params, query, path).

🧭 4. Navigasi Programatik — Pindah Halaman via Kode

import { useRouter } from 'vue-router'

const router = useRouter()

// Navigasi ke halaman tertentu (seperti klik link)
router.push('/about')
router.push({ name: 'user', params: { id: '42' } })

// Ganti halaman tanpa simpan ke history (tidak bisa back)
router.replace('/login')

// Seperti klik tombol back/forward di browser
router.back()
router.forward()

⚠️ PERHATIAN

Jika kamu menggunakan createWebHistory(), pastikan server kamu dikonfigurasi untuk selalu mengembalikan index.html untuk semua route. Kalau tidak, user yang langsung mengakses URL seperti /about akan mendapat error 404 dari server. Untuk development, Vite sudah mengurus ini secara otomatis!

🔬 PERBANDINGAN MENDALAM: History Mode vs Hash Mode

🌐 createWebHistory()

URL bersih: /about
SEO-friendly ✅
Butuh konfigurasi server khusus ⚠️
Rekomendasi untuk production

🔗 createWebHashHistory()

URL dengan hash: /#/about
Tidak perlu konfigurasi server ✅
Kurang SEO-friendly ⚠️
Cocok untuk deploy statis sederhana

💡 TIPS PRO

Gunakan Lazy Loading untuk performa yang lebih baik! Alih-alih mengimport komponen langsung, gunakan component: () => import('../views/AboutView.vue'). Ini membuat file JavaScript hanya di-load ketika route tersebut pertama kali diakses, bukan saat aplikasi pertama kali dibuka — halaman akan terasa jauh lebih cepat!

🏗️ Contoh Lengkap: Struktur Proyek Vue Router yang Rapi

Setelah semua puzzle terpasang, ini gambaran struktur folder proyek Vue 3 dengan routing Vue 3 yang sudah terorganisir dengan baik:

my-vue-app/
├── src/
│   ├── router/
│   │   └── index.js       ← konfigurasi semua route
│   ├── views/             ← komponen halaman (dipanggil oleh router)
│   │   ├── HomeView.vue
│   │   ├── AboutView.vue
│   │   └── UserView.vue
│   ├── components/        ← komponen reusable (tombol, card, dll)
│   │   └── NavBar.vue
│   ├── App.vue            ← root: letakkan RouterView di sini
│   └── main.js           ← daftarkan plugin router di sini

📖 BAGIAN DARI SERI BELAJAR

Seri Belajar Vue: Vue from Zero to Zorro

16 artikel yang akan membawamu dari nol hingga bisa membangun aplikasi Vue 3 yang profesional. Artikel ini adalah bagian ke-10.

📚 Lihat Daftar Isi Lengkap →

✅ KESIMPULAN

Kamu Sekarang Siap Bikin Aplikasi Multi-Halaman dengan Vue Router!

Di artikel ini, kita sudah mengupas tuntas Vue Router dari A sampai Z:

• 🗺️ Apa itu Vue Router dan kenapa SPA lebih baik dari navigasi tradisional
• ⚙️ Cara instalasi dan konfigurasi routing Vue 3 dari nol (5 langkah)
• 🚀 Fitur lanjutan: dynamic routes, nested routes, navigation guards, dan navigasi programatik
• 🔬 Perbedaan Web History Mode vs Hash Mode
• 🏗️ Struktur folder proyek yang rapi dan skalabel

Sekarang giliran kamu! Coba buat proyek Vue 3 baru, tambahkan minimal 3 route berbeda, dan rasakan sendiri betapa mulus-nya navigasi tanpa reload itu. Percaya deh, sekali coba, kamu tidak akan mau balik ke cara lama.

💬 Ada pertanyaan atau stuck di bagian mana? Tinggalkan komentar di bawah — kita diskusikan bareng! Dan kalau artikel ini bermanfaat, share ke teman yang juga lagi belajar Vue. Lumayan bisa bantu mereka skip jam berjam-jam googling! 🚀

#VueRouter #RoutingVue3 #BelajarVue #VueFrontEnd #SPA #ZeroToZorro

NAVIGASI SERI ARTIKEL

← ARTIKEL SEBELUMNYA · #9

Lifecycle Hooks di Vue 3 — Kapan Komponen Lahir, Hidup, dan Mati

→ Baca Artikel Sebelumnya

ARTIKEL SELANJUTNYA · #11 →

State Management dengan Pinia — Simpan Data Global

→ Baca Artikel Selanjutnya