Vue Router Dasar — CompileDaily Study

Penjelasan

vue-router adalah library routing resmi Vue (beda dengan React yang routing-nya library pihak ketiga tanpa dukungan resmi) — bisa dipilih otomatis saat npm create vue@latest. Route didefinisikan sebagai array objek {path, component}, navigasi antar halaman tanpa reload lewat komponen <RouterLink>.

Contoh Konsep

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Beranda from '../views/Beranda.vue';
import Tentang from '../views/Tentang.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Beranda },
        { path: '/tentang', component: Tentang },
    ],
});

export default router;

// App.vue
// <template>
//   <nav>
//     <RouterLink to="/">Beranda</RouterLink>
//     <RouterLink to="/tentang">Tentang</RouterLink>
//   </nav>
//   <RouterView />
// </template>

Praktikum

Buat dua komponen halaman: Kontak.vue dan Layanan.vue. Daftarkan keduanya di array routes pada path /kontak dan /layanan, dan tulis contoh <RouterLink> navigasi ke masing-masing.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

SELALU pakai komponen <RouterLink to="..."> untuk navigasi internal, JANGAN pakai tag <a href="..."> biasa — sama alasannya dengan React, <a> memicu RELOAD PENUH halaman, sedangkan <RouterLink> berpindah halaman tanpa reload.