Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara melakukan installasi dan konfigurasi router di dalam Vue.js 3 untuk membuat navigasi halaman secara SPA (Single Page Application). Di dalam Vue.js, untuk membuat navigasi secara SPA kita butuh library tambahan yang bernama Vue Router.
Apa itu Vue Router ?
Vue Router merupakan library yang dikembangkan seacara official oleh Vue.js core tim dan digunakan untuk membuat routing yang bersifat SPA (Single Page Application) di dalam Vue.js dengan sangat mudah dan cepat.
INFORMASI SELENGKAPNYA : https://router.vuejs.org/
Langkah 1 - Install Vue Router
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Vue 3.
npm install vue-router@4.1.6
Silahkan tunggu proses installasinya sampai selesai.
Langkah 2 - Integrasi Bootstrap di Vue 3
Disini kita akan melakukan integrasi Bootstrap di dalam project Vue 3. Dan untuk Bootstrap akan kita ambil dari CDN atau Content Delivery Network (Online).
Silahkan buka file index.html, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<!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 + Laravel 10 - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 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 menambahkan Bootstrap CSS dan JS dari CDN.
Langkah 3 - Membuat Views
Setelah sebelumnya Vue Router berhasil terinstall, langkah berikutnya adalah melakukan konfigurasi router di dalam aplikasi yang kita kembangkan.
Sebelum masuk di dalam pembuatan router, maka kita harus membuat view-view atau component-nya terlebih dahulu.
View Homepage
Silahkan teman-teman buat folder baru dengan nama views di dalam folder src dan di dalam folder views tersebut silahkan buat file baru dengan nama home.vue, kemudian masukkan kode berikut ini di dalamnya.
<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 (VITE) + LARAVEL 10</h1>
<p class="col-md-8 fs-4">Belajar CRUD dengan Vue 3 dan Laravel 10 di SantriKoding.com</p>
</div>
</div>
</template>
Di atas, kita hanya membuat sintaks sederhana menggunakan HTML.
View Posts Index
Silahkan teman-teman buat folder baru dengan nama posts di dalam folder src/views, kemudian di dalam folder posts tersebut buatlah file baru dengan nama index.vue dan masukkan kode berikut ini di dalamnya.
<script setup>
</script>
<template>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
HALAMAN POSTS INDEX
</div>
</div>
</div>
</div>
</div>
</template>
View Post Create
Silahkan teman-teman buat file baru dengan nama create.vue di dalam folder src/views/posts, kemudian masukkan kode berikut ini di dalamnya.
<script setup>
</script>
<template>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
HALAMAN POST CREATE
</div>
</div>
</div>
</div>
</div>
</template>
View Post Edit
Terakhir, silahkan teman-teman buat file baru dengan nama edit.vue di dalam folder src/views/posts, kemudian masukkan kode berikut ini di dalamnya.
<script setup>
</script>
<template>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
HALAMAN POST EDIT
</div>
</div>
</div>
</div>
</div>
</template>
Langkah 4 - Membuat Konfigurasi Router
Setelah semua view berhasil dibuat, maka langkah berikutnya adalah membuat konfigurasi router-nya.
Silahkan teman-teman buat folder baru dengan nama router di dalam folder src dan di dalam folder router silahkan buat file baru dengan nama index.js, kemudian masukkan kode berikut ini di dalamnya.
//import vue router
import { createRouter, createWebHistory } from 'vue-router'
//define a routes
const routes = [
{
path: '/',
name: 'home',
component: () => import( /* webpackChunkName: "home" */ '../views/home.vue')
},
{
path: '/posts',
name: 'posts.index',
component: () => import( /* webpackChunkName: "index" */ '../views/posts/index.vue')
},
{
path: '/create',
name: 'posts.create',
component: () => import( /* webpackChunkName: "create" */ '../views/posts/create.vue')
},
{
path: '/edit/:id',
name: 'posts.edit',
component: () => import( /* webpackChunkName: "edit" */ '../views/posts/edit.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.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 route bisa diakses dari seluruh aplikasi Vue 3, maka kita perlu mengaturnya secara global. Di dalam Vue 3 untuk mengatur konfigurasi secara global kita bisa letakkan di dalam file main.js.
Jadi, silahkan teman-teman buka file src/main.js, kemudian ubah kode-nya menjadi seperti berikut ini.
//import createApp from Vue
import { createApp } from 'vue';
//import component App
import App from './App.vue';
//import config router
import router from './router'
//create App Vue
const app = createApp(App);
//gunakan "router" di Vue dengan plugin "use"
app.use(router);
app.mount('#app');
Di atas, kita import konfigurasi router-nya terlebih dahulu.
//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.
//create App Vue
const app = createApp(App);
Dan untuk melakukan register router, kita bisa menggunakan keyword use.
//gunakan "router" di Vue dengan plugin "use"
app.use(router);
Langkah 6 - Konfigurasi Router View
Agar view dari router bisa dirender pada halaman browser, maka kita perlu memanggil component dari Vue Router yang bernama <view-router></view-router>.
Di dalam Vue 3, component yang bersifat global adalah App.vue, maka kita akan letakkan component dari Vue Router di dalam file tersebut.
Silahkan buka file src/App.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<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">
<li class="nav-item">
<router-link :to="{ name: 'posts.index' }" class="nav-link active" aria-current="page">POSTS</router-link
>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" role="search">
<a
href="https://santrikoding.com"
target="_blank"
class="btn btn-success"
>SANTRIKODING.COM</a
>
</ul>
</div>
</div>
</nav>
<!--- render router view -->
<router-view></router-view>
</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 3, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.
Dan jika teman-teman klik menu posts, maka akan diarahkan ke dalam halaman posts index secara SPA atau tidak perlu melakukan reload halaman.
Kurang lebih seperti itu tutorial bagaiamana cara membuat router di dalam Vue 3, jika teman-teman ada kendala saat belajar silahkan bisa bertanya melalui kolom komentar atau group Telegram dari SantriKoding.
Pada artikel selanjutnya kita akan belajar bagaimana cara menampilkan data dari Rest API di dalam Vue 3.
Terima Kasih