Vue Router 101: Cara Membuat Single Page Application dengan Vue.js

Vue.js adalah salah satu framework JavaScript paling populer untuk membangun antarmuka pengguna yang interaktif. Salah satu fitur unggulan Vue adalah kemampuannya dalam membangun Single Page Application (SPA) menggunakan Vue Router. Dengan Vue Router, kita dapat membuat navigasi antar halaman tanpa harus me-refresh seluruh halaman, sehingga pengalaman pengguna menjadi lebih cepat dan responsif.

Dalam panduan ini, kita akan membahas:
✅ Apa itu Vue Router dan mengapa penting dalam SPA
✅ Cara menginstal dan mengkonfigurasi Vue Router di Vue.js
✅ Membuat halaman dinamis dengan Vue Router
✅ Menggunakan router-link untuk navigasi tanpa reload
✅ Menerapkan parameter dan guard untuk pengamanan rute

📌 Baca juga: Integrasi GraphQL di Vue.js: Panduan Lengkap dengan Apollo Client

1. Apa Itu Vue Router?

Vue Router adalah pustaka resmi untuk menangani navigasi di aplikasi Vue.js. Dengan Vue Router, kita bisa:
🔹 Membuat halaman dinamis di aplikasi SPA.
🔹 Menggunakan parameter URL untuk mengambil data spesifik.
🔹 Menggunakan lazy loading untuk meningkatkan performa aplikasi.
🔹 Melindungi rute dengan navigation guards.

2. Instalasi Vue Router

Jika belum menginstal Vue Router, jalankan perintah berikut:

npm install vue-router@4

3. Konfigurasi Vue Router

Buat file router.js di dalam folder src:

javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

export default router

Tambahkan Vue Router ke dalam main.js:

javascript

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

4. Membuat Halaman dan Navigasi

Buat folder views/ lalu tambahkan file Home.vue dan About.vue:

Home.vue

vue

<template>
  <div>
    <h1>Home Page</h1>
    <p>Selamat datang di Single Page Application dengan Vue Router!</p>
  </div>
</template>

About.vue

vue
<template>
  <div>
    <h1>About Page</h1>
    <p>Halaman ini menjelaskan tentang aplikasi Vue.js kami.</p>
  </div>
</template>

5. Menambahkan Navigasi Antar Halaman

Buka App.vue dan tambahkan router-link untuk berpindah antar halaman tanpa reload:

vue
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<style scoped>
nav {
  display: flex;
  gap: 15px;
  padding: 10px;
  background: #42b983;
}
a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
</style>

6. Menggunakan Parameter di Vue Router

Kadang, kita ingin menampilkan halaman yang dinamis berdasarkan parameter URL. Misalnya, kita memiliki halaman Detail Produk yang harus menampilkan produk berdasarkan ID.

Tambahkan rute baru di router.js:

javascript

import ProductDetail from './views/ProductDetail.vue'

const routes = [
  { path: '/product/:id', component: ProductDetail }
]

Buat ProductDetail.vue untuk menampilkan ID produk dari URL:

vue

<template>
  <div>
    <h1>Detail Produk</h1>
    <p>ID Produk: {{ $route.params.id }}</p>
  </div>
</template>

Sekarang, kita bisa mengakses /product/1, /product/2, dan halaman akan menampilkan ID produk sesuai dengan URL.

7. Menambahkan Navigation Guards

Jika ingin melindungi halaman tertentu agar hanya bisa diakses oleh pengguna yang login, kita bisa menggunakan navigation guards.

Contoh guard sebelum masuk ke halaman profil:

javascript

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/profile', component: Profile, beforeEnter: (to, from, next) => {
        const isAuthenticated = false // Ubah dengan kondisi login pengguna
        if (isAuthenticated) {
          next()
        } else {
          next('/') // Redirect ke halaman utama
        }
      } 
    }
  ]
})

8. Lazy Loading untuk Performa Optimal

Untuk meningkatkan performa, kita bisa menggunakan lazy loading dengan import() di rute:

javascript

const About = () => import('./views/About.vue')

const routes = [
  { path: '/about', component: About }
]

Dengan lazy loading, komponen hanya akan diunduh ketika dibutuhkan, sehingga waktu muat awal aplikasi lebih cepat.

Kesimpulan

Vue Router adalah alat yang sangat powerful untuk membangun Single Page Application (SPA) di Vue.js. Dengan konfigurasi sederhana, kita bisa membuat navigasi halaman yang efisien, menangani parameter URL, menerapkan guard untuk proteksi halaman, serta mengoptimalkan performa dengan lazy loading.

📌 Baca juga: Integrasi GraphQL di Vue.js: Panduan Lengkap dengan Apollo Client