Vue Academy · Pelajaran

Rute Bertingkat dan Dinamis

Bangun layout bertingkat dan parameter rute dinamis.

Pelajaran 2 dari 313 langkah

Rute Bertingkat dan Dinamis adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Melampaui route Statis

app nyata memerlukan route yang membawa data dan bertingkat di dalam tata letak.

Segmen dinamis menangkap nilai seperti sebuah ID
route bertingkat menampilkan komponen anak di dalam komponen induk
route bernama dan navigasi terprogram memberikan fleksibilitas

Segmen Dinamis route

Tanda titik dua mendefinisikan sebuah segmen dinamis yang cocok dengan nilai apa pun.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

Mengakses route.params

Baca nilai yang ditangkap melalui route.params.

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

Merespons Perubahan Parameter

Ketika hanya parameternya yang berubah, misalnya dari /user/1 menjadi /user/2, komponen tersebut digunakan kembali. Amati parameter itu untuk memuat ulang data.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Beberapa Segmen Dinamis

route dapat memiliki beberapa bagian dinamis.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

route Bertingkat

route bertingkat memungkinkan route anak ditampilkan di dalam komponen induk.

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

Tampilan router Bertingkat

Komponen induk memerlukan tampilan router miliknya sendiri sebagai tempat komponen anak ditampilkan.

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

route Bernama

Berikan sebuah route sebuah nama agar Anda dapat merujuknya tanpa menulis jalurnya secara tetap.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

Menautkan Berdasarkan Nama

Tautan router dapat menargetkan route bernama dan meneruskan parameter sebagai sebuah objek.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

Navigasi Terprogram

Lakukan navigasi dari JavaScript dengan metode push milik router.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

Metode Navigasi Lainnya

Router menyediakan beberapa pembantu navigasi lainnya:

router.push menambahkan entri riwayat baru
router.replace melakukan navigasi tanpa entri riwayat baru
router.back kembali ke halaman sebelumnya

Uji Cepat

Uji pemahaman Anda tentang route dinamis dan bertingkat.

Jawab di pelajaran interaktif

Ringkasan: route Bertingkat dan Dinamis

Anda telah mempelajari perutean tingkat lanjut:

Segmen dinamis (/user/:id) ditangkap dalam route.params
route bertingkat melalui children serta tampilan router bertingkat
route bernama memungkinkan Anda menautkan berdasarkan nama
router.push melakukan navigasi secara terprogram

Berikutnya: penjaga navigasi.

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 “Rute Bertingkat dan Dinamis” gratis?

Ya — teks lengkap “Rute Bertingkat dan Dinamis” 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 “Rute Bertingkat dan Dinamis”?

Bangun layout bertingkat dan parameter rute dinamis. 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 2 dari 3.

Berapa lama pelajaran “Rute Bertingkat dan Dinamis” 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

Menyiapkan Vue Router
Rute Bertingkat dan Dinamis
Guard Navigasi

← Kembali ke Vue Academy