VueJs-#09 SPA dengan Vue-router

Single Page Application itu apa sih ?

Bagi yang belum tau apa itu spa berikut ini adalah kutipan dari situs wikipedia tentang pengertian spa :

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

Jadi sederhananya user tidak akan berpindah halaman ketika melakukan proses request kepada server setiap terjadi perpindahan pada halaman, namun hanya akan melakukan load terhadap satu halaman dari server kemudian mekanisme routingnya dibebankan pada sisi client.

Persiapan

Karena kita akan menggunakan vue-cli pada praktik kali ini maka silahkan teman-teman siapkan fresh instalan vue-clinya terlebih dahulu, untuk yg belum tau cara instalnya bisa menuju li

  1. Buat Project Menggunakan Vue CLI
  2. Install Axios

Install Vue-Router

Setelah mengistall vue menggunakan Vue CLI, anggap kita membuat project dengan nama vue-spa. Menggunakan terminal masuk ke direktori vue-spa, ketik perintah berikut untuk mengistall vue-router :

npm install vue-router

Mulai membuat aplikasi

Pertama silahakan buka file projectnya pada text-editor masing-masing, kemudian ubah file src/App.vue menjadi seperti berikut ini:

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

<script>
export default {
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Saat pertama kali dibuka program membaca main.js. Edit main.js supaya dapat membaca router.

import router from './router'
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

Buat file src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import User from "@/components/User"
import Home from "@/components/Home";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: "/user/:id",
      name: "User",
      component: User
    }
  ]
})

Yang perlu diperhatikan pada script diatas adalah pada bagian /user/:id karena ini yang akan kita gunakan nanti sebagai halaman detailnya, dan jangan lupa untuk mengimport terlebih dahulu file Home dan User.vue nya.

Kemudian setelah selesai langkah selanjutnya adalah buatlah file baru dengan nama Home.vue pada folder src/components/Home.vue, dan ketikan kode berikut ini :

<template>
  <div id="container">
   <header>
     <h1> Daftar Nama User : </h1>
   </header>
   <div class="list">
     <ul v-for="user in users" :key="user.id" style="list-style: none">
         <li>
            <router-link :to="{ name: 'User', params: { id: user.id } }">
                {{ user.name }}
            </router-link>
        </li>
     </ul>
   </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.getAllUser()
  },
  methods: {
    getAllUser() {
      axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        this.users = response.data
        console.log(response)
      })
      .catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.list {
    margin-left: -50px;
}
</style>

Perhatikan baris axios di atas, kita menggunakan axios untuk memanggil Rest API.

Pertama kita mengimport library axios agar bisa kita gunakan untuk mengkonsumsi data apinya, setelah itu membuat sebuah method bernama getAllUser() yang akan kita gunakan untuk mengambil data dari layanan api yang kita gunakan, setelah itu kita juga menggunakan fungsi created untuk menjalankan kode kita setelah sebuah instance dibuat, kemudian pada bagian template nya kita tampilkan datanya dengan menggunakan v-for dan menggunakan fungsi dari vue-router yaitu router-link untuk navigasi.

Langkah terakhir tapi bukan terakhir adalah silahkan buat sebuah file bernama User.vue di dalam folder /src/components/User.vue

kemudian isikan dengan kode berikut :

<template>
    <div class="container">
        <div class="user">
            <h2> Data user dengan nama : {{ user.name }} </h2>
            <ul>
                <li> Username : {{ user.username }} </li>
                <li> Email : {{ user.email }} </li>
            </ul>
            <router-link to="/"> Back </router-link>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
      return {
          user: []
      }
  },
  created() {
      this.getUser()
  },
  methods: {
      getUser() {
          axios.get(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)
          .then((response) => {
            this.user = response.data
          })
          .catch((err) => {
            console.log(err)     
          })
      }
  }
}
</script>

<style scoped>
ul li {
    list-style: none;
}
</style>

Perhatikan Baris

axios.get(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)

Wajib menggunakan petik ` bukan ‘ atau “, supaya ${this.$route.params.id} dapat terbaca.

Kode diatas hampir sama dengan kode pada file home.vue, bedanya adalah dibagian url endpointnya kita menambahkan kodeĀ this.$route.params.idĀ yang fungsinya adalah untuk menangkap id parameters yang sebelumnya didapatkan pada halaman Home yang mana juga digunakan untuk menampilkan data detail masing-masing user.

Setelah semuanya selesai langkah terakhir adalah mencoba menjalankan aplikasi, ketikan perintah berikut pada terminal untuk menjalankan aplikasi :

npm run serve

Sumber

1.https://medium.com/@MFaridZia/single-page-application-dengan-vue-js-dan-vue-router-7cccb14269d0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>