Latihan 2: Vue Router Dasar — Vue

Latihan 2 dari materi Vue Router Dasar di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Satu halaman profil untuk banyak nama, lewat parameter di alamat. Kode awal sudah punya router dengan route / ke Home, komponen Profil yang template-nya membaca route.params.nama, dan <nav id="nav"> berisi tiga RouterLink: Home, Budi (/profil/budi), dan Sari (/profil/sari).

Di routes, tambahkan { path: "/profil/:nama", component: Profil }. :nama adalah parameter: bagian alamat di posisi itu jadi nilainya.
Di setup() komponen Profil, ambil route aktif dengan const route = useRoute() dan kembalikan: return { route }.

Yang dicek:

Saat pertama tampil, h2#current berbunyi persis Home, dan #nav punya minimal 3 link.
Setelah link Budi diklik, #current berbunyi Profil budi.
Setelah link Sari diklik, #current berbunyi Profil sari.
Kodenya memakai useRoute( dan path dengan :nama.

Hint

Satu route dengan parameter cocok dengan banyak alamat. Nilai parameternya dibaca dari route aktif, yang didapat lewat useRoute().
Tambahkan { path: "/profil/:nama", component: Profil } di routes, lalu di setup Profil: const route = useRoute(); return { route }.
setup() { const route = useRoute(); return { route } }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Vue Router Dasar — Vue

Hint

Memperbarui Aplikasi