Membuat Route Menggunakan Vue Router di Vue.js

Ketika kita membuat sebuah website tentunya kita memerlukan sebuah navigasi yang berfungsi untuk membantu pengguna menjelajahi website kita, berpindah dari satu halaman ke halaman lain. Untuk mengakomodir hal tersebut di vue js disediakan vue-router.

Vue-router ini berfungsi untuk mengatur routing atau link di setiap halaman website kita. Vue-router akan mengatur sebuah link atau url yang diakses oleh pengguna akan menampilkan file atau halaman yang mana. Kalau kamu sebelumnya pernah menggunakan framework PHP seperti Laravel, Nah kurang lebih fungsi vue-router ini sama dengan route.php nya Laravel.

Sebelum memulai instalasi dan configurasi vue-router, bagi kamu yang belum install vue js silahkan bisa mengunjungi cara install vue js.

Kalau sudah install vue js-nya, selanjutnya adalah install vue-router. Kalau kamu menggunakan vue-cli sebenarnya diawal instalasi vue js akan ditanya apakah akan sekalian install vue-router atau tidak. Tapi, jika belum menginstall vue-router kamu cukup buka terminal dan masuk ke direktori root vue project dan masukkan perintah berikut.

npm install vue-router

Setelah berhasil install vue-router, sekarang mari kita buat file yang berfungsi untuk mengatur routing website kita. Kurang lebih seperti inilah contoh kode untuk mengatur routingnya.

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

import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import PageNotFound from '@/components/404.vue';

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    name: 'Home',
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  { path: "*", component: PageNotFound },
];

const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

Kode diatas berfungsi untuk mendefinisikan route apa saja yang ada pada website kita. Pertama kita harus mengimport vue yang merupakan core website kita. Kemudian import vue-router yang akan mengatur route website. Kemudian jangan lupa untuk memanggil Vue.use(VueRouter), ini berfungsi untuk memberitahukan vue untuk menggunakan vue-router sebagai router website. '@' digunakan untuk mengarah ke direktori ./src, jadi kita bisa menyingkatnya dengan hanya memanggil '@'. Path '*' digunakan sebagai wildcard atau file default yang dieksekusi ketika path yang dimasukan pengguna tidak ditemukan atau tidak cocok dengan daftar route yang kita buat.

Kemudian kita juga membuat object routes yang berisi daftar route. Setiap route minimal mempunyai beberapa attribute:

• path: URL atau path yang didaftarkan
• name: Nama atau alias untuk sebuah path
• component: File vue yang berisi template yang akan ditampilkan di browser

mode history berfungsi untuk membuat vue tidak mereload halaman ketika pengguna berpindah halaman. Simpan file routes diatas di ./src/router/index.js. Jika belum ada direktori router, silahkan buat dahulu. Sebenarnya kamu bebas mau menyimpan file tersebut di direktori mana pun dan dengan nama file apapun. Pada tutorial ini disimpan dengan nama index.js di direktori ./src/router.

Setelah routing website telah kita config, selanjutnya kita akan mengubah main.js yang berfungsi sebagai gerbang utama dari sistem kita. Kita akan mengubah main.js agar menggunakan vue-router pada saat merender vue core. Buka file main.js, biasanya ada pada direktori src dan lakukan perubahan sehingga menjadi seperti berikut.

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

Vue.config.productionTip = false

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

Terakhir kita akan mengubah file interface utama vue yaitu App.vue untuk me-render file sesuai yang telah dideklarasikan pada router yang telah kita buat. Buka file App.vue dan lakukan perubahan sehingga menjadi seperti berikut.

<template>
  <div id="app">
    <router-link to="/">HOME</router-link> | <router-link to="/about">ABOUT</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Gunakan <router-link> ketika ingin membuat anchor atau kalau dalam html itu adalah tag <a href="#">. <router-view> berfungsi untuk memanggil atau me-render file yang telah dideklarasikan pada router sesuai path url yang sedang di buka di browser.

Kode diatas merupakan kode sederhana yang menunjukan bagaimana vue-router bekerja untuk mengatur routing pada halaman website kita. Untuk penjelasan mengenai cara membuat komponen-komponennya akan dibahas di artikel yang berbeda. Selain itu kamu juga bisa menambahkan framework html css agar tampilannya lebih bagus seperti bootstrap atau yang lainnya.

Berikut tampilan hasil dari kode diatas. Silahkan buat file Home.vue, About.vue, dan 404.vue secara mandiri sesuai selera masing-masing. Ini hasil buatan saya. putih suci dan polos, sangat sederhana.

Halaman Home

Halaman About

Halaman Error 404

Sekian tutorial Membuat Route Menggunakan Vue Router di Vue.js ini, Silahkan jika ada pertanyaan drop di kolom komentar. Terima kasih.