Halo teman-teman semuanya, pada artikel kali ini kita semua akan belajar bagaimana cara installasi dan konfigurasi Vue Router di dalam project Vue. Library ini nantinya akan kita gunakan untuk membuat sebuah navigasi secara SPA atau single page application.
Apa itu Vue Router ?
Vue Router adalah library pihak ketiga (official) yang digunakan untuk menambah kemampuan navigasi pada aplikasi Vue. Dengan Vue Router, kita dapat membuat aplikasi Vue menjadi Single Page Application (SPA) dimana pengguna bisa berpindah antar halaman web tanpa perlu memuat ulang seluruh halaman.
Vue Router bekerja dengan mencocokkan URL browser dengan route yang telah didefinisikan. Ketika pengguna mengakses URL tertentu, Vue Router akan menampilkan komponen yang sesuai dengan route tersebut.
Langkah 1 - Installasi Vue Router
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project-nya.
npm install vue-router@4.3.2
Langkah 2 - Integrasi Bootstrap di Vue
Untuk mempermudah dalam membuat user interface atau UI, maka kita akan menggunakan framework CSS yang bernama Bootstrap.
Silahkan teman-teman buka project-nya menggunakan text editor (direkomendasikan VsCode), kemudian buka file index.html dan ubah kode-nya menjadi seperti berikut ini.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 + Pinia - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
<style>
body { background-color: lightgray; font-family: 'Quicksand', sans-serif }
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Di atas, kita memanggil CSS Bootstrap secara online, yaitu.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
Dan kita juga memberikan sedikit kustomisasi CSS untuk project.
body { background-color: lightgray; font-family: 'Quicksand', sans-serif }
Langkah 3 - Membuat Views
Sekarang kita lanjutkan memnbuat beberapa views yang nanti digunakan di dalam project, kurang lebih diantaranya adalah:
-
home - untuk menampilkan halaman homepage.
-
register - untuk menampikan halaman register.
-
login - untuk menampilkan halaman login.
-
dashboard - untuk menampilkan halaman dashboard.
View Home
Silahkan teman-teman buat folder baru dengan nama views di dalam folder src. Kemudian di dalam folder src silahkan teman-teman buat folder dengan nama home dan di dalam folder home tersebut silahkan buat file baru dengan nama index.vue, kemudian masukkan kode berikut ini di dalamnya.
src/views/home/index.vue
<script setup>
</script>
<template>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">VUE 3 + PINIA</h1>
<p class="col-md-8 fs-4">Belajar State Management di Vue 3 dengan Pinia</p>
</div>
</div>
</template>
View Register
Sekarang, silahkan teman-teman buat folder baru dengan nama auth di dalam folder src/views, kemudian di dalam folder auth tersebut buatlah file baru dengan nama register.vue dan masukkan kode berikut ini di dalamnya.
src/views/auth/register.vue
<script setup>
</script>
<template>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">HALAMAN REGISTER</h1>
<p class="col-md-8 fs-4">Belajar State Management di Vue 3 dengan Pinia</p>
</div>
</div>
</template>
View Login
Setelah membuat view register, maka kita lanjutkan membuat view untuk login, silahkan teman-teman buat file baru dengan nama login.vue di dalam folder src/views/auth, kemudian masukkan kode berikut ini di dalamnya.
src/views/auth/login.vue
<script setup>
</script>
<template>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">HALAMAN LOGIN</h1>
<p class="col-md-8 fs-4">Belajar State Management di Vue 3 dengan Pinia</p>
</div>
</div>
</template>
View Dashboard
Terakhir, kita akan membuat view untuk halaman dashboard, view ini nantinya kita gunakan untuk menampilkan data user yang sedang login dan hanya bisa diakses jika user sudah melakukan proses otentikasi.
Silahkan teman-teman buat folder baru dengan nama dashboard di dalam folder src/views, kemudian di dalam folder dashboard tersebut silahkan buat file baru dengan nama index.vue dan masukkan kode berikut ini di dalamnya.
src/views/dashboard/index.vue
<script setup>
</script>
<template>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">HALAMAN DASHBOARD</h1>
<p class="col-md-8 fs-4">Belajar State Management di Vue 3 dengan Pinia</p>
</div>
</div>
</template>
Langkah 4 - Membuat konfigurasi Router
Setelah berhasil membuat beberapa views, maka kita tinggal membuatkan konfigurasi router-nya.
Silahkan teman-teman buat folder baru dengan nama router di dalam folder src, kemudian di dalam folder router tersebut silahkan buat file baru dengan nama index.js dan masukkan kode berikut ini di dalamnya.
src/router/index.js
//import vue router
import { createRouter, createWebHistory } from 'vue-router'
//define a routes
const routes = [
{
path: '/',
name: 'home',
component: () => import( /* webpackChunkName: "home" */ '../views/home/index.vue')
},
{
path: '/register',
name: 'register',
component: () => import( /* webpackChunkName: "home" */ '../views/auth/register.vue')
},
{
path: '/login',
name: 'login',
component: () => import( /* webpackChunkName: "home" */ '../views/auth/login.vue')
},
{
path: '/dashboard',
name: 'dashboard',
component: () => import( /* webpackChunkName: "home" */ '../views/dashboard/index.vue'),
},
]
//create router
const router = createRouter({
history: createWebHistory(),
routes // <-- routes,
})
export default router
Dari penambahan kode di atas, pertama kita import createRouter dan createWebHistory dari Vue Router.
//import vue router
import { createRouter, createWebHistory } from 'vue-router'
Setelah itu, kita buat variable baru dengan nama routes yang memiliki jenis array. Dan di dalamnya kita berikan deklarasi router-router untuk halaman.
//define a routes
const routes = [
//...
]
Contoh untuk pembuatan router kurang lebih seperti berikut ini.
{
path: '/',
name: 'home',
component: () => import( /* webpackChunkName: "home" */ '../views/home/index.vue')
}
Dalam pembuatan route yang sederhana, kurang lebih terdapat 3 object, yaitu :
-
path - digunakan untuk alamat / URL dari route.
-
name - digunakan untuk penamaan route, ini akan mempermudah kita dalam pemanggilan route nantinya.
-
component - merupakan lokasi file view yang dipanggil saat route diakses atau dijalankan.
Langkah 5 - Register Route
Agar router bisa digunakan secara global di dalam project, maka kita perlu memanggil dan me-registernya di dalam file main.js.
Silahkan teman-teman buka file src/main.js, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/main.js
import { createApp } from 'vue'
//import config router
import router from './router'
//import App component
import App from './App.vue'
//initialize vue
const app = createApp(App)
//use router on vue
app.use(router)
//mount root app element
app.mount('#app')
Dari perubahan kode di atas, kita import file router yang sudah kita buat sebelumnya.
//import config router
import router from './router'
Setelah itu, kita letakkan createApp dari Vue di dalam variable yang bernama app. Ini bertujuan agar kita bisa lebih mudah dalam menggunakannnya.
//initialize vue
const app = createApp(App)
Dan untuk melakukan register router, kita bisa menggunakan keyword use.
//use router on vue
app.use(router)
Langkah 6 - Konfigurasi Router View
Agar router bisa dirender di dalam project, maka kita perlu memanggil component dari Vue Router itu sendiri dan kita akan memanggilnya di dalam induk component project, yaitu file App.vue.
Silahkan teman-teman buka file src/App.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/App.vue
<template>
<div>
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container">
<router-link :to="{ name: 'home' }" class="navbar-brand">HOME</router-link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" role="search">
<a
href="https://santrikoding.com"
target="_blank"
class="nav-link"
>SANTRIKODING.COM</a
>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link :to="{ name: 'login' }" class="nav-link" aria-current="page">LOGIN</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'register' }" class="nav-link" aria-current="page">REGISTER</router-link>
</li>
</ul>
</div>
</div>
</nav>
<!--- render router view -->
<div class="container mt-5">
<router-view></router-view>
</div>
</div>
</template>
Di atas, kita menambahkan layout untuk project ini dan untuk me-render setiap route pada layout tersebut, kita gunakan kode berikut ini.
<!--- render router view -->
<router-view></router-view>
Langkah 7 - Uji Coba Project
Sekarang silahkan reload / refresh project Vue, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.
Dan jika teman-teman klik menu LOGIN dan REGISTER, maka akan diarahkan ke dalam halamannya secara SPA atau tidak perlu melakukan reload halaman.
Kesimpulan
Pada artikel ini, kita bersama-sama telah belajar bagaimana cara installasi dan konfigurasi Vue Router di dalam project Vue.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara installasi dan konfigurasi Pinia (State Management) di dalam project Vue.
Terima Kasih