Secara umum (tidak hanya di Vue.js), router adalah kode yang bekerja di pertengahan request / response. Ketika sebuah request dikirim, router akan mencocokkan request yang diterima dengan response yang sesuai. Jika ditemukan response yang cocok, maka request dianggap valid, lalu diarahkan ke action tertentu. Contoh : user membuka URL https://variancode.com/kontak/ pada browser, router akan mencocokkan request tersebut dengan komponen Vue yang tersedia di daftar. Jika valid, kemudian request diteruskan ke komponen Vue bernama Kontak (misal). Apabila sebaliknya, tidak ada satupun yang cocok, request dialihkan ke komponen Vue bernama NotFound404 (misal juga).

Cara Routing di Aplikasi Vue.js

Routing pada Vue.js dapat dilakukan tanpa library (bisa dibaca di Simple Routing From Scratch) maupun dengan menggunakan library seperti Page.js dan Director. Tapi, di sini saya hanya tertarik menggunakan vue-router yang merupakan official router untuk Vue.js. Beberapa fitur yang dimiliki oleh vue-router :

routing pada vue.js dengan vue-router

Cara Instalasi vue-router

Instalasi vue-router dapat dilakukan dengan unduh file vue-router.js ke local development atau mentautkannya via CDN. Selain dua cara konvensional tersebut, kita juga bisa melakukannya dengan npm (Node Package Manager) :

npm install vue-router

lalu import ke project aplikasi :

import VueRouter from 'vue-router'

dan jangan lupa gunakan Vue.use :

Vue.use(VueRouter)

Terakhir menggunakan Vue-CLI. Oya, sebelumnya di materi Cara Instalasi Vue.js saya memilih preset default (babel, eslint) :

cara instalasi vue.js

sekarang saya akan menggantinya dengan Manually select features, kemudian memilih Babel, Router dan Linter / Formatter sebagai fitur yang akan disertakan dalam pembuatan aplikasi / project Vue baru. Urutan instalasi selengkapnya dapat dilihat pada gambar berikut :

routing pada vue.js dengan vue-router
nama aplikasi / project Vue yang dibuat adalah cobarouter

Router dari Instalasi Vue-CLI

Agar dapat digunakan, pertama-tama library vue-router harus di-import melalui baris kode :

import VueRouter from "vue-router";

Kemudian install VueRouter ke dalam aplikasi / project Vue :

Vue.use(VueRouter);

Buat daftar routes (bisa diberi nama lain) dalam bentuk array json yang mencakup pasangan path, name dan component. Route pertama diakses melalui URL atau path:"/". Ketika URL “/” dibuka oleh user melalui browser, maka Vue akan merespon request tersebut dengan memanggil komponen Home yang route-nya diberi nama sama, yaitu Home juga (disarankan nama route sama dengan nama komponen). Sedangkan route kedua diakses melalui URL atau path:"/about". Ketika URL “/about” dibuka oleh user melalui browser, maka Vue akan merespon request tersebut dengan memanggil komponen About.

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue")
  }
];

Komponen dapat dipanggil dengan dua cara berbeda, pertama :

import Home from "../views/Home.vue";

atau cara kedua :

component: () => import("../views/About.vue")

Setelah array json routes ditentukan, sisipkan array json tersebut ke dalam inisiasi VueRouter (nama const router bisa diganti nama lain) :

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

Sertakan inisiasi class VueRouter ke inisiasi class Vue agar dapat dikaitkan dan di-render ke elemen #app pada file main.js :

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

Aplikasi / project Vue akan merender komponen App yang di-import dari :

import App from "./App.vue";

Seperti yang telah dijelaskan di materi Menggunakan Webpack dan Vue-CLI, file App.vue berperan sebagai komponen top-level. Di sini vue-router dipanggil melalui <router-view />. Tag <router-link> bekerja seperti tag anchor <a href>, bedanya <router-link> tidak melakukan refresh halaman browser ketika terjadi perpindahan halaman.

routing pada vue.js dengan vue-router

Di materi selanjutnya Membuat EventBus dengan Akses Global Pada Vue.js, saya akan menunjukkan cara menggunakan vue-router dan <router-link> dengan template yang dibuat sendiri dari nol.