• Langkah 1 - Install Vue Router & Axios
• Langkah 2 - Konfigusrasi & Membuat Vue Router
• Langkah 3 - Menampilkan Vue Router

Tutorial Vue JS & Restful API Lumen #5 : Menambahkan Vue Router & Axios - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara menambahkan Vue Router dan Axios di dalam aplikasi Vue JS kita.

Langkah 1 - Install Vue Router & Axios

Langsung saja kita mulai, silahkan teman-teman jalankan perintah berikut ini :

npm i vue-router axios

Silahkan tunggu proses installasi sampai dengan selesai, proses installasi ini membutuhkan koneksi internet.

Setelah proses installasi selesai, sekarang kita akan meregister dan menggunakan Vue Router di aplikasi Vue JS kita. Dan kita kali ini tidak akan menggunakan Axios terlebih dahulu.

Langkah 2 - Konfigusrasi & Membuat Vue Router

Sekarang, silahkan teman-teman buka file main.js di dalam folder src, silahkan ganti kodenya menjadi seperti berikut ini :

import Vue from 'vue'
import App from './App.vue'
//import Vue Router
import VueRouter from 'vue-router'

//menggunkan Vue Router di Vue JS
Vue.use(VueRouter);

//import components
import PostsIndex from './components/posts/Index'
import PostsCreate from './components/posts/Create'
import PostsEdit from './components/posts/Edit'

Vue.config.productionTip = false

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'posts',
      component: PostsIndex
    },
    {
      path: '/create',
      name: 'create',
      component: PostsCreate
    },
    {
      path: '/edit/:id',
      name: 'edit',
      component: PostsEdit
    }
  ],
  mode: 'history'
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Dari kode diatas, kita menambahkan beberapa baris kode, diantaranya adalah

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

Kode di atas, kita gunakan untuk menggunakan Vue router di aplikasi Vue JS kita.

//menggunakan Vue Router di Vue JS
Vue.use(VueRouter);

Kode di atas, kita mencoba meregister Vue Router di Vue JS Instance

//import components
import PostsIndex from './components/posts/Index'
import PostsCreate from './components/posts/Create'
import PostsEdit from './components/posts/Edit'

Kode di atas, kita mengimport beberapa component, dimana component ini akan kita gunakan di Vue Router kita nanti.

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'posts',
      component: PostsIndex
    },
    {
      path: '/create',
      name: 'create',
      component: PostsCreate
    },
    {
      path: '/edit/:id',
      name: 'edit',
      component: PostsEdit
    }
  ],
  mode: 'history'
})

Kode di atas, kita membuat sebuah route baru untuk aplikasi Vue JS kita, bisa teman-teman lihat disitu kita membuat sebuah route sekaligus memanggil component Vue JS kita.

new Vue({
  router, //register vue router
  render: h => h(App),
}).$mount('#app')

Kode di atas, kita meregister Vue Router di aplikasi Vue JS kita.

Langkah 3 - Menampilkan Vue Router

Terakhir, silahkan buka file App.vue dan ubah kodenya menjadi seperti berikut ini :

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

Kode di atas akan merender Vue Router kita ke dalam layar browser. Sekarang silahkan teman-teman buka aplikasi Vue JS kita, dengan mengetikkan http://localhost:8080

Sampai disini pembahasan tentang bagaimana cara menginstall Vue Router & Axios di project Vue JS kita, di artikel selanjutnya kita semua akan belajar bagaimana cara menambahkan Bootstrap di project Vue JS kita.

Terima Kasih