Vue Router: Cara dan Contoh Penggunaan

Perkenalan

Vue sangat berguna untuk membuat Aplikasi Satu Halaman, halaman webnya juga sangat interaktif yang memungkinkan kita untuk tidak me-refresh halaman ketika kita mengubah dari halaman satu ke halaman yang lain. Note: This article is intended for Indonesians

Jika website kamu memiliki banyak halaman dan kamu menggunakan Vue, itulah mengapa kamu membutuhkan Vue Router. Note: Pastikan kalian paham tentang Vue dan Javascript dasar

Basic Dari Vue Router

🚀 Mempersiapkan Vue Router dari awal

1.Pertama Kita Install Vue Router di Command Line

$ npm i vue-router@next

2.Konfigurasi pada Direktori /src/router/index.js

import { createWebHistory, createRouter } from "vue-router";
// Import Component2 Kalian

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

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Note: Di direktori /src/router/index.js kita membuat routes di dalam sebuah array yang akan mengspesifikasikan beberapa hal:

• Path - URL / Tempat dimana component akan di load
• Component - Komponen yang akan diload saat path dipanggil
• Name - (Opsional)

Dibawah array routes terdapat createRouter yang pastinya diperlukan untuk membuat router itu sendiri

Dan juga terdapat createWebHistory yang digunakan untuk beralih dari mode hash ke mode history di dalam browser, menggunakan API history HTML5, Ini yang akan membuat history pada browser kita setiap kita meload router

3.Konfigurasi pada direktori /src/main.js
Pada direktori /src/main.js kita juga perlu menambahkan sesuatu

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---

createApp(App)
  .use(router) // <---
  .mount('#app')

Ya, tentunya kita perlu mengimpornya ke file utama kita

🚀 Menggunakan Router

Ada 2 component yang diberikan oleh Vue Router yaitu <router-view /> dan <router-link to="/" />.

<router-view /> digunakan untuk membungkus component2 yang akan dirender , dan <router-link to="/" /> ini mirip seperti tag anchor pada html, pada tag anchor biasanya kita menggunakan href tetapi pada router link kita menggunakan 'to'

Note: Biasanya <router-view /> dideklarasikan di file App.vue karena file tersebut adalah halaman utama yang isinya akan kita ubah2

Contoh:

// (/src/App.vue)
<template>
  <div id="navbar">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

// (Home.vue)
<template>
  <h1>Home Page</h1>
</template>

// (About.vue)
<template>
  <h1>About Page</h1>
</template>

🚀 Selesai.. ya mungkin seperti itu konsep dasar vue router, mohon maaf bila bahasa yang digunakan membingungkan