Belajar Vue JS: Pindah Halaman Menggunakan Vue Router

Vue Router adalah sebuah library yang digunakan untuk melakukan routing (pindah halaman) dalam aplikasi web yang dibangun dengan Vue JS. Dalam artikel ini, kita akan belajar bagaimana menggunakan Vue Router untuk melakukan pindah halaman dalam aplikasi Vue JS.

Langkah 1: Instalasi Vue Router

Langkah pertama yang perlu dilakukan adalah menginstal Vue Router. Anda dapat menggunakan npm atau yarn untuk menginstal Vue Router:


npm install vue-router


yarn add vue-router


Langkah 2: Mendefinisikan Routes

Setelah Vue Router diinstal, langkah selanjutnya adalah mendefinisikan routes (rute) yang akan digunakan dalam aplikasi Vue JS. Anda dapat melakukan ini dengan membuat file routes.js sebagai berikut:


const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]


Langkah 3: Menerapkan Vue Router

Langkah terakhir adalah menerapkan Vue Router ke dalam aplikasi Vue JS. Anda dapat melakukannya dengan mengimpor Vue Router dan menggunakan Vue.use() untuk menerapkan router:


import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)


Langkah 4: Menggunakan Router-link

Setelah Vue Router diterapkan, Anda dapat menggunakan komponen router-link untuk membuat link yang akan mengarah ke rute tertentu:


Home
About
Contact


Langkah 5: Menerapkan Router-view

Terakhir, Anda perlu menambahkan komponen router-view ke dalam aplikasi Vue JS untuk menampilkan konten dari rute yang sedang aktif:

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil menggunakan Vue Router untuk melakukan pindah halaman dalam aplikasi Vue JS. Semoga artikel ini bermanfaat dan membantu Anda dalam belajar Vue JS!