Vue Academy · Pelajaran

Menyiapkan Vue Router

Instal Vue Router dan definisikan rute pertama Anda.

Pelajaran 1 dari 313 langkah

Menyiapkan Vue Router adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Apa Itu Vue Router

Vue Router adalah pustaka perutean resmi untuk Vue.

Memetakan URL ke komponen
Memungkinkan navigasi satu halaman tanpa memuat ulang seluruh halaman
Mengelola riwayat, tautan, dan parameter

Memasang Vue Router

Tambahkan Vue Router ke proyek Anda dengan npm.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Membuat Komponen route

Setiap route menampilkan sebuah komponen. Mulailah dengan komponen halaman sederhana.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Mendefinisikan Larik routes

Sebuah larik routes memetakan jalur ke komponen.

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

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

createRouter

Fungsi createRouter membuat sebuah router dari routes dan mode riwayat.

import { createRouter, createWebHistory } from "vue-router"

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

export default router

createWebHistory

createWebHistory menggunakan API riwayat HTML5 untuk membuat URL bersih seperti /about.

Tidak ada hash dalam URL
Memerlukan konfigurasi server agar tautan langsung ke halaman bertingkat dapat berfungsi
Alternatifnya adalah createWebHashHistory (/#/about)

Mendaftarkan Router

Pasang router ke app dengan app.use.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

Tampilan router

Komponen tampilan router adalah tempat komponen route yang cocok ditampilkan.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

Tautan router

Gunakan tautan router, bukan tag jangkar biasa, untuk navigasi. Cara ini menghindari pemuatan ulang seluruh halaman.

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

Penataan Gaya Tautan Aktif

Tautan router secara otomatis menambahkan kelas CSS ke tautan yang aktif.

router-link-active untuk kecocokan sebagian
router-link-exact-active untuk kecocokan tepat

Terapkan gaya pada kelas-kelas ini untuk menyoroti halaman saat ini.

Menggabungkan Semuanya

Alur lengkapnya:

Tentukan routes yang memetakan jalur ke komponen
Buat router dengan createRouter dan createWebHistory
Daftarkan dengan app.use(router)
Tempatkan tampilan router dan lakukan navigasi dengan tautan router

Uji Cepat

Uji pemahaman Anda tentang penyiapan Vue Router.

Jawab di pelajaran interaktif

Ringkasan: Menyiapkan Vue Router

Anda telah menyiapkan perutean sisi klien:

Pasang dengan npm install vue-router
Tentukan sebuah larik routes
Gunakan createRouter dengan createWebHistory
Daftarkan melalui app.use(router)
Gunakan tampilan router dan tautan router

Berikutnya: route bertingkat dan dinamis.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Vue Router” gratis?

Ya — teks lengkap “Menyiapkan Vue Router” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Vue Router”?

Instal Vue Router dan definisikan rute pertama Anda. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Menyiapkan Vue Router” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy