Menggunakan Vue Router

Sekarang kita akan belajar cara menggunakan Vue Router. Ini merupakan salah satu materi Vue yang cukup penting. Perlu kita ingat bahwa aplikasi yang kita buat dengan Vue merupakan Single Page Application (SPA), jadi saat kita butuh tampilan tertentu kita tidak berpindah halaman. Berbeda dengan Multi Page Application (MPA), dimana ketika kita request suatu url, maka server akan memberikan response berupa halaman baru. Vue Router akan membantu kita membuat mekanisme yang mirip request-response pada MPA, tapi ketika kita melakukan request url, response yang diberikan adalah Component.

Ketika kita menggunakan Vue Router, kita akan mendapatkan 2 component penting, yaitu <RouterLink> dan <RouterView>. RouterLink berfungsi untuk mengubah url pada address bar, sedangkan RouterView digunakan untuk menampilkan component. RouterView mengetahui component mana yang harus ditampilkan dari routes yang kita definisikan. Untuk lebih jelasnya mari kita ikuti langkah-langkah berikut ini:

Memasang dan Menggunakan Vue Router

Vue Router tidak secara otomatis terpasang ketika kita membuat project Vue. Kita harus menambahkannya dengan perintah npm install vue-router@4. Untuk memasangnya cukup itu saja sih. Jika sudah terpasang selanjutnya kita melakukan setup. Ubah App.vue menjadi seperti berikut ini:

import { createApp } from 'vue';
import {createRouter, createWebHashHistory, type Router} from "vue-router";
import App from './App.vue';
import Home from "./components/Home.vue";
import About from "./components/About.vue";

const router: Router = createRouter({
    routes: [],
    history: createWebHashHistory()
});

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

Pada contoh di atas, kita membuat router dengan fungsi createRouter(). Router yang sudah dibuat selanjutnya dimasukkan ke aplikasi menggunakan fungsi app.use(router). Kita akan mendefinisikan routes yang berisi pemetaan path ke component pada routes. Sebelum kita definisikan routes, alangkah baiknya kita buat contoh 2 component yang nantinya akan dipetakan dengan path. Mari kita buat component Home dan About yang simple saja, seperti ini

<!--Component Home-->
<script setup lang="ts"></script>

<template>
  <h1>Home</h1>
  Welcome Home!
</template>

<style scoped></style>

<!--Component About-->
<script setup lang="ts"></script>

<template>
  <h1>About</h1>
  How about you?
</template>

<style scoped></style>

Menggunakan 2 component di atas, kita bisa membuat routes seperti ini.

import { createApp } from 'vue';
import {createRouter, createWebHistory, type Router} from "vue-router";
import App from './App.vue';
import Home from "./components/Home.vue";
import About from "./components/About.vue";

const router: Router = createRouter({
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ],
    history: createWebHistory()
});

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

Menampilkan Component dengan Vue Router

Sekarang kita sudah punya 2 component dan juga punya routes. Sekarang kita akan menampilkan componentnya di App.vue. Berikut ini contoh cara menampilkan componentnya.

<script setup lang="ts"></script>

<template>
  <div>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </div>
  <RouterView/>
</template>

<style scoped></style>

Pada source code di atas, kita punya 2 RouterLink yang mengarah ke Home dan About. Cara penulisan RouterLink mirip dengan <a> tapi mengganti href menjadi to. Component Home dan About nantinya akan ditampung ke dalam <RouterView/>. Jadi ketika kita klik RouterLink maka RouterView akan diisi dengan component yang sesuai (yang didefisikan di routes). Tampilannya seperti ini.

Penutup

Nah, demikianlah cara menggunakan Vue Router. Di sini kita baru belajar menggunakan routes yang simple. Masih ada beberapa konfigurasi yang bisa gunakan pada routes. Nantikan di tulisan berikutnya ya. Jika penjelasan di atas masih kurang jelas, teman-teman dapat melihat dokumentasi di Vue JS. Selamat belajar, semoga tulisan ini bermanfaat untuk kita semuanya.