Cara Membuat Router Di Vue Js Dengan Vue Router

Sigit N | 4 January 2023 | Diperbarui: 29 July 2026 | VueJS, Javascript

Halo teman-teman semua kali ini saya mau share cara membuat link atau URL di Vue js. yang kita gunakan adalah untuk membuat router dengan library Vue Router, dengan vue router kita bisa melakukan navigasi pindah halaman dengan URL (Uniform Resource Locator) atau URI (Uniform Resource Locator).

Kita lanjutkan membuat file project dari postingan Cara Download Vue Js dan Install dengan Vue CLI dengan nama folder project belajar-vue

Install Vue Route di Vue CLI

vue add router

dengan menjalankan perintah tersebut maka library vue router akan didownload dan diinstal dalam folder project kita belajar-vue proses download sedang berjalan seperti gambar di bawah ini:
- tekan y di keyboard dan enter.
- proses install vue router sebagai plugin di vue cli

jika selesai dengan sempurna, maka akan ada beberapa file baru seperti gambar di bawah ini:

process install vue router

file yang baru ditambahkan oleh vue router secara otomatis yaitu file:

file: src/router/index.js
file: src/views/AboutView.vue
file: src/views/HomeView.vue

dan ada beberapa perubahan coding di file :

file : src/App.vue
file : src/main.js

selanjutnya fokus di folder route dan view saja.

Mencoba menjalankan Vue Router

setelah mencoba install mari kita coba Vue Router apakah berjalan atau tidak. mari kita jalankan servernya dulu dengan mengetik perintah

npm run serve

kemudian buka browser dengan alamat url http://localhost:8080, jika berhasil maka akan ada Home dan About di bagian atas

bagian halaman dengan Home http://localhost:8080/
bagian halaman dengan About url http://localhost:8080/about

merubah View untuk Vue Router

setelah berhasil menjalankan Vue Router secara default, teman-teman bisa merubah halaman dan menambahkan halaman di folder src/views/

berikut ini isi file kodingan AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

dan di bagian file route/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Penjelasan :

setiap bagian path atau url misal nya /about harus dinasalisasikan di route, dengan key path , name dan component

kemudian di bagian App.js kegunaannya berisikan :

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

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

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Penjelasan :

<router-link to="/about">About</router-link> adalah bagian untuk mengerahkan url jika di html biasa menggunakan <a href="/about">About</a>

Tips Debugging JavaScript

Gunakan console.log() secara strategis — Tempatkan console.log() di titik-titik kritis untuk melacak nilai variabel dan alur eksekusi.
Manfaatkan browser DevTools — Tab Console, Sources, dan Network di Chrome DevTools adalah sahabat terbaik developer JavaScript.
Aktifkan strict mode — Tambahkan "use strict"; di awal file atau function untuk menangkap kesalahan umum.
Pelajari error message — TypeError, ReferenceError, dan SyntaxError memberikan petunjuk jelas tentang apa yang salah.
Gunakan try/catch — Bungkus kode yang berpotensi error dengan blok try/catch untuk menangani exception dengan baik.

Dengan pendekatan debugging yang sistematis, Anda bisa menemukan dan memperbaiki bug JavaScript dengan lebih cepat.

Kesimpulan

dengan menambahkan route vue di vue js cli memudahkan kita untuk melakukan bernavigasi dan manajemen view sebagai tampilah modular.