Home  >  Vue Js

Membangun Aplikasi Single Page (SPA) Lengkap dengan Vue Router

Single Page Application (SPA) telah menjadi pendekatan standar dalam pengembangan aplikasi web modern. Dengan SPA, perpindahan halaman terasa lebih cepat, pengalaman pengguna lebih halus, dan logika aplikasi dapat dikelola secara terpusat di sisi klien.

Vue.js menyediakan solusi resmi untuk membangun SPA melalui Vue Router, sebuah library routing yang terintegrasi erat dengan sistem reaktivitas Vue. Dengan Vue Router, kita dapat mengatur navigasi, URL, dan struktur halaman aplikasi secara rapi tanpa harus melakukan reload halaman penuh.

Artikel ini akan membahas secara menyeluruh bagaimana membangun aplikasi SPA yang lengkap menggunakan Vue Router, mulai dari konsep dasar hingga praktik yang umum digunakan pada aplikasi produksi.

1. Apa Itu Single Page Application (SPA)?

SPA adalah aplikasi web yang hanya memuat satu halaman HTML utama. Setelah halaman tersebut dimuat, seluruh navigasi antar halaman dilakukan secara dinamis menggunakan JavaScript.

Karakteristik utama SPA:

  • Tidak terjadi reload halaman penuh saat berpindah halaman
  • Navigasi terasa cepat dan mulus
  • URL tetap berubah untuk mencerminkan halaman aktif
  • Data dan state aplikasi dapat dipertahankan selama navigasi

Vue Router berperan sebagai penghubung antara URL browser dan komponen Vue yang harus ditampilkan.

2. Peran Vue Router dalam Aplikasi Vue

Vue Router bertanggung jawab untuk:

  • Memetakan URL ke komponen
  • Menampilkan komponen sesuai rute aktif
  • Mengelola navigasi (push, replace, back)
  • Mendukung parameter, query, dan nested routes
  • Mengontrol akses halaman (route guard)

Tanpa Vue Router, aplikasi Vue hanya akan menjadi aplikasi satu tampilan tanpa navigasi berbasis URL.

3. Instalasi dan Konfigurasi Awal Vue Router

Jika Anda menggunakan Vue 3, Vue Router versi 4 adalah pilihan yang tepat.

npm install vue-router

Setelah itu, buat file router khusus untuk mengatur seluruh rute aplikasi.

router/index.js

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

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

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

export default router

Kemudian daftarkan router ke aplikasi Vue:

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

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

4. Menampilkan Halaman dengan <router-view>

Vue Router menggunakan <router-view> sebagai placeholder untuk menampilkan komponen sesuai rute aktif.

<template>
  <div>
    <Navbar />
    <router-view />
  </div>
</template>

Setiap kali URL berubah, komponen di dalam <router-view> akan diganti secara otomatis tanpa reload halaman.

5. Navigasi Antar Halaman dengan <router-link>

Alih-alih menggunakan <a href>, Vue Router menyediakan <router-link> untuk navigasi yang aman dan efisien.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Keunggulan router-link:

  • Tidak memicu reload halaman
  • Mendukung class aktif otomatis
  • Terintegrasi dengan history browser
<router-link to="/about" active-class="active-link">
  About
</router-link>

6. Route Parameter dan Dynamic Routing

Untuk halaman dinamis seperti detail pengguna atau produk, Vue Router mendukung parameter pada URL.

Konfigurasi Route

{
  path: '/users/:id',
  name: 'user-detail',
  component: UserDetail
}

Mengakses Parameter

import { useRoute } from 'vue-router'

const route = useRoute()
const userId = route.params.id

Dengan ini, satu komponen dapat digunakan untuk berbagai data berdasarkan URL.

7. Query Parameter dan Navigasi Programatik

Selain parameter path, Vue Router juga mendukung query string.

router.push({
  path: '/search',
  query: { q: 'vue', page: 1 }
})

Akses di komponen:

const route = useRoute()
console.log(route.query.q)

Navigasi programatik sangat berguna setelah:

  • Submit form
  • Login berhasil
  • Redirect bersyarat

8. Nested Routes untuk Layout Kompleks

Aplikasi nyata sering memiliki layout bersarang seperti dashboard.

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    {
      path: 'overview',
      component: DashboardOverview
    },
    {
      path: 'settings',
      component: DashboardSettings
    }
  ]
}

Di DashboardLayout.vue:

<template>
  <div>
    <Sidebar />
    <router-view />
  </div>
</template>

Nested routes membantu memisahkan layout dan konten secara jelas.

9. Route Guard: Mengontrol Akses Halaman

Vue Router memungkinkan kita membatasi akses halaman tertentu menggunakan navigation guards.

Contoh Guard Global

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth()

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

Menandai Route yang Dilindungi

{
  path: '/profile',
  component: Profile,
  meta: { requiresAuth: true }
}

Dengan guard, keamanan navigasi dapat dikelola secara terpusat.

10. Lazy Loading untuk Optimasi Performa

Untuk aplikasi besar, memuat semua halaman sekaligus tidak efisien. Vue Router mendukung lazy loading dengan dynamic import.

{
  path: '/reports',
  component: () => import('@/views/Reports.vue')
}

Manfaat lazy loading:

  • Waktu load awal lebih cepat
  • Bundle JavaScript lebih kecil
  • Halaman hanya dimuat saat dibutuhkan

11. Handling 404 dan Fallback Route

SPA yang baik harus menangani rute yang tidak dikenal.

{
  path: '/:pathMatch(.*)*',
  component: NotFound
}

Hal ini penting untuk:

  • Pengalaman pengguna
  • SEO
  • Error handling yang rapi

12. Studi Kasus: Struktur SPA Sederhana

Struktur umum aplikasi SPA dengan Vue Router:

src/
 ├─ views/
 │   ├─ Home.vue
 │   ├─ Login.vue
 │   ├─ Dashboard.vue
 ├─ router/
 │   └─ index.js
 ├─ App.vue

Dengan struktur ini:

  • Views fokus pada halaman
  • Router mengatur navigasi
  • Komponen UI reusable tetap terpisah

Vue Router adalah fondasi utama dalam membangun aplikasi Single Page Application menggunakan Vue.js. Dengan memahami cara kerja routing, navigasi, dan pengelolaan halaman, kita dapat:

  • Membuat aplikasi terasa cepat dan modern
  • Mengelola URL secara konsisten
  • Membangun layout kompleks dengan rapi
  • Mengontrol akses halaman dengan aman
  • Mengoptimalkan performa melalui lazy loading

Penguasaan Vue Router bukan hanya tentang navigasi, tetapi juga tentang arsitektur aplikasi. Semakin baik routing dirancang, semakin mudah aplikasi dikembangkan dan dipelihara dalam jangka panjang.

Categories:Vue Js

Tags:

Related Posts