SPA Vue.js
Berikut adalah langkah-langkah untuk membuat SPA (Single Page Application) menggunakan Vue Router:
Buatlah proyek Vue baru dengan menggunakan perintah vue create nama-proyek pada terminal. Pastikan sudah terinstall Node.js dan Vue CLI pada komputer Anda.
Setelah membuat proyek baru, buka folder proyek dan install Vue Router dengan perintah npm install vue-router.
Setelah proses instalasi selesai, buka file main.js pada folder src. Kemudian, import Vue Router dan gunakan Vue.use(Router) untuk menginstal Vue Router pada aplikasi Vue. Contohnya seperti berikut:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
// tambahkan route lain di sini
]
})
Buat komponen-komponen Vue yang akan digunakan dalam aplikasi, seperti halaman utama (Home.vue), halaman detail (Detail.vue), dan halaman lain yang dibutuhkan.
Tambahkan route untuk setiap halaman pada file router.js. Contohnya seperti berikut:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/detail/:id',
name: 'detail',
component: Detail,
props: true
}
]
})
Gunakan router-link untuk membuat tautan antara halaman dalam aplikasi. Contohnya seperti berikut:
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'detail', params: { id: 1 }}">Detail</router-link>
CATATAN: kode diatas sangat penting, menggunakan href menyebabkan reload halaman barus secara utuh
Tambahkan
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
Jalankan aplikasi dengan perintah npm run serve pada terminal. Aplikasi akan berjalan pada localhost:8080 atau port lain yang ditentukan.
Dengan langkah-langkah di atas, Anda dapat membuat SPA menggunakan Vue Router. Selamat mencoba!