3. Vue Router

tech

Table of Content

• Vue Router
• Instalasi dan Penggunaannya
• router.js
• app.js
• App.vue

Vue Router

Vue Router adalah pustaka (library) untuk Vue.js yang menyediakan fitur routing untuk aplikasi Vue. Ini memungkinkan pengembang untuk membuat aplikasi satu halaman (Single Page Applications atau SPA) dengan navigasi yang mulus tanpa harus me-reload seluruh halaman. Berikut adalah beberapa fitur utama dari Vue Router:

1. Routing Dinamis: Mengelola rute yang berbeda berdasarkan URL yang dimasukkan.
2. Navigasi Halaman: Mendukung navigasi maju dan mundur dengan menggunakan browser history.
3. Rute Dinamis: Mendukung rute dinamis dengan parameter yang dapat berubah.
4. Nested Routes: Mendukung rute bersarang untuk aplikasi yang lebih kompleks.
5. Route Guards: Menyediakan hooks untuk mengatur akses ke rute tertentu berdasarkan kondisi tertentu (seperti autentikasi).
6. Lazy Loading: Mendukung pemuatan komponen secara malas (lazy loading) untuk meningkatkan kinerja aplikasi.
7. Transition: Mendukung animasi transisi halaman untuk pengalaman pengguna yang lebih halus.

Instalasi dan Penggunaannya

instal dengan mengetik npm install vue-router Ada beberapa yg harus kita coding di awal.

router.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeComponent from './components/HomeComponent.vue';
import AboutComponent from './components/AboutComponent.vue';
 
const routes = [
  {
    path: '/',
    component: HomeComponent,
  },
  {
    path: '/about',
    component: AboutComponent,
  },
];
 
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

Penjelasan:

• createRouter dan createWebHistory diimpor dari vue-router. createRouter digunakan untuk membuat instance router, dan createWebHistory digunakan untuk mengelola riwayat browser menggunakan mode HTML5 history.
• HomeComponent dan AboutComponent diimpor dari file komponen masing-masing.
• routes adalah array objek yang masing-masing mendefinisikan rute. Setiap objek rute memiliki dua properti utama:
  • path: URL path untuk rute tersebut.
  • component: Komponen Vue yang akan dirender ketika path tersebut diakses.
• createRouter digunakan untuk membuat instance router. Ini mengambil objek konfigurasi yang berisi dua properti utama:
  • history: Mengatur strategi riwayat untuk router. createWebHistory() digunakan untuk menggunakan HTML5 history mode, yang memungkinkan URL bersih tanpa hash (#).
  • routes: Array rute yang telah didefinisikan sebelumnya.

app.js

Ada perubahan karena saya menggunakan versi terbaru dari vue.js

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';
 
createApp(App).use(router).mount('#app');

Penjelasan:

• createApp diimpor dari pustaka vue dan digunakan untuk membuat instance aplikasi Vue.
• router diimpor dari file router.js atau router.ts, yang berisi konfigurasi router yang telah dibuat sebelumnya.
• App diimpor dari App.vue, yang merupakan komponen root dari aplikasi Vue.

App.vue

File ini saya pakai untuk master layouts nya.

<template>
    <nav>
        <ul>
            <li><router-link to="/">Home</router-link></li>
            <li><router-link to="/about">Another Page</router-link></li>
        </ul>
    </nav>
 
    <router-view></router-view>
</template>

Note: harus ada router-view karena jika tidak ada maka komponen yg dipanggil di file router.js tidak akan tampil…

Date: 23-07-2024