🧭 Vue Router

Vue Router adalah library resmi untuk manajemen routing (navigasi) pada aplikasi Vue.js. Dengan Vue Router, kamu dapat membuat Single Page Application (SPA) dengan navigasi antar halaman tanpa reload.

---

📦 1. Instalasi Vue Router

a. Jika menggunakan Vue CLI:

vue add router

b. Atau secara manual:

npm install vue-router

---

🔧 2. Konfigurasi Dasar Vue Router

File: src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
  ]
});

---

🔗 3. Menggunakan Router di Aplikasi

File: src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

---

📄 4. Navigasi Halaman

Gunakan <router-link> untuk navigasi antar halaman:

<router-link to="/">Beranda</router-link>
<router-link to="/about">Tentang</router-link>

<router-link> akan dirender menjadi elemen <a> otomatis.

---

📦 5. Tampilan Dinamis

Tambahkan <router-view> di komponen utama untuk menampilkan halaman berdasarkan URL:

<template>
  <div>
    <h1>My App</h1>
    <router-view />
  </div>
</template>

---

📂 6. Struktur Direktori Umum

src/
├── views/
│   ├── Home.vue
│   └── About.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

---

🔀 7. Parameter & Routing Dinamis

{ path: '/user/:id', component: User }

Akses parameter:

this.$route.params.id

👮 8. Navigation Guards (Middleware)

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

---

🧪 9. Mode history vs hash

Mode	URL Contoh	Keterangan
hash	/#/about	Default, tidak butuh konfigurasi server
history	/about	Butuh konfigurasi server (nginx, etc)

Gunakan mode: 'history' untuk URL bersih dan SEO-friendly.

📌 Kesimpulan Vue Router adalah komponen kunci dalam membangun aplikasi Vue SPA. Dengan konsep komponen dan routing dinamis, kamu dapat membuat aplikasi multi-halaman yang efisien dan modern.