Latihan 1: Vue Router Dasar — Vue

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

Bangun navigasi dengan Vue Router. Kode awal sudah meng-import createRouter dan createWebHistory, dan sudah punya dua halaman: Home dan About.

Buat router-nya: const router = createRouter({ history: createWebHistory(), routes: [...] }), dengan dua route: { path: "/", component: Home } dan { path: "/about", component: About }.
Di template, buat <nav> berisi <RouterLink id="home-link" to="/">Home</RouterLink> dan <RouterLink id="about-link" to="/about">About</RouterLink>.
Di bawah <nav>, tulis <RouterView />: tempat halaman yang cocok dengan alamatnya tampil.

Editor ini gak punya main.js, jadi router yang dibuat createRouter langsung dipasang ke app-nya, seperti app.use(router). Pratinjau juga gak punya address bar, jadi riwayatnya disimpan di memori dan mulai dari /.

Yang dicek:

#home-link dan #about-link ada, dan #about-link menuju /about.
Saat pertama tampil, #page berbunyi persis Home Page.
Setelah #about-link diklik, #page berbunyi About Page; setelah #home-link diklik, kembali Home Page.
Kodenya memakai createRouter(, <RouterLink, dan <RouterView.

Hint

Router memetakan alamat ke komponen. RouterLink mengganti alamat tanpa memuat ulang halaman, dan RouterView menampilkan komponen yang cocok dengan alamat itu.
const router = createRouter({ history: createWebHistory(), routes: [{ path: "/", component: Home }, { path: "/about", component: About }] }). Di template: <nav> dengan dua <RouterLink>, lalu <RouterView />.
<nav><RouterLink id="home-link" to="/">Home</RouterLink><RouterLink id="about-link" to="/about">About</RouterLink></nav><RouterView />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Vue Router Dasar — Vue

Hint

Memperbarui Aplikasi