Navigasi Terprogram dan useRouter
Composable router.push(), router.replace(), router.go(), useRouter(), dan useRoute().
Navigasi Terprogram dan useRouter adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 4 pelajaran total.
Bernavigasi dari Kode
Selain RouterLink, Anda sering perlu bernavigasi dari JavaScript — setelah mengirim formulir atau masuk. Komposabel useRouter memberi Anda instans router untuk melakukannya.
Mendapatkan Router
Panggil useRouter() di dalam <script setup>. Objek yang dikembalikan menyediakan push, replace, go, dan lainnya.
import { useRouter } from 'vue-router'
const router = useRouter()Bernavigasi dengan push
router.push menambahkan entri ke tumpukan riwayat — seperti saat mengeklik tautan. Bentuk paling sederhananya menerima string jalur.
router.push('/dashboard')Push dengan Objek Route
Anda juga dapat meneruskan objek dengan name, params, dan query. Route bernama menghindari penulisan jalur secara langsung.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace: Tanpa Entri Riwayat
router.replace melakukan navigasi tanpa menambahkan entri ke riwayat, sehingga tombol kembali akan melewatinya. Gunakan setelah masuk agar pengguna tidak dapat kembali ke halaman masuk.
router.replace('/dashboard')Kembali dan Maju
router.go(n) berpindah dalam riwayat sebanyak n langkah. router.go(-1) kembali satu halaman; router.go(1) maju satu halaman.
function goBack() {
router.go(-1)
}Setelah Aksi Asinkron
Alur yang umum: kirim formulir, tunggu hasilnya, lalu lakukan navigasi. push mengembalikan Promise yang dapat Anda tunggu hingga selesai.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Membaca Route Saat Ini
Untuk membaca parameter dan kueri dari route saat ini, gunakan komposabel useRoute. Jangan keliru dengan useRouter — useRoute adalah route, sedangkan useRouter adalah navigator.
import { useRoute } from 'vue-router'
const route = useRoute()Mengakses Parameter
Baca segmen dinamis melalui route.params. Untuk route /user/:id, id berada di route.params.id.
const userId = route.params.idMengakses String Kueri
Baca string kueri melalui route.query. Untuk ?tab=profile, gunakan route.query.tab.
const tab = route.query.tabMerespons Perubahan Parameter
Karena route bersifat reaktif, amati perubahan tersebut untuk merespons saat parameter berubah ketika Anda tetap berada di komponen yang sama.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Uji Cepat
Uji pengetahuan Anda tentang navigasi terprogram.
Ringkasan
Anda telah mempelajari navigasi terprogram:
- useRouter() menyediakan push, replace, dan go.
- push menambahkan riwayat; replace tidak menambahkannya; go(-1) kembali.
- push menerima string jalur atau objek { name, params, query }.
- useRoute() membaca parameter dan kueri saat ini serta bersifat reaktif.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Navigasi Terprogram dan useRouter” gratis?
Ya — teks lengkap “Navigasi Terprogram dan useRouter” 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 4 pelajaran total.
Apa yang akan aku pelajari di “Navigasi Terprogram dan useRouter”?
Composable router.push(), router.replace(), router.go(), useRouter(), dan useRoute(). 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 4 dari 4.
Berapa lama pelajaran “Navigasi Terprogram dan useRouter” 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
- Field Meta Rute dan Pengetikan
- Transisi dan Animasi Rute
- Konfigurasi Perilaku Scroll
- Navigasi Terprogram dan useRouter