Vue Academy · Pelajaran

Navigasi Berprogram dan useRouter

Komposabel router.push(), router.replace(), router.go(), useRouter() dan useRoute().

Pelajaran 4 daripada 413 langkah

Navigasi Berprogram dan useRouter ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Menavigasi daripada Kod

Selain RouterLink, anda sering perlu menavigasi daripada JavaScript — selepas penghantaran borang atau log masuk. Komposabel useRouter memberikan anda tika router untuk melakukan perkara ini.

Mendapatkan Router

Panggil useRouter() di dalam <script setup>. Objek yang dikembalikan mendedahkan push, replace, go dan banyak lagi.

import { useRouter } from 'vue-router'
const router = useRouter()

Menavigasi dengan push

router.push menambahkan satu entri pada timbunan sejarah — seperti mengklik pautan. Bentuk paling mudah menerima rentetan laluan.

router.push('/dashboard')

Push dengan Objek Laluan

Anda juga boleh menghantar objek dengan name, params dan query. Laluan bernama mengelakkan laluan dikodkan secara tetap.

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

Replace: Tiada Entri Sejarah

router.replace menavigasi tanpa menambahkan entri pada sejarah, jadi butang kembali akan melangkauinya. Gunakannya selepas log masuk supaya pengguna tidak boleh kembali ke halaman log masuk.

router.replace('/dashboard')

Bergerak Kembali dan ke Hadapan

router.go(n) bergerak melalui sejarah sebanyak n langkah. router.go(-1) kembali satu halaman; router.go(1) bergerak ke hadapan.

function goBack() {
  router.go(-1)
}

Selepas Tindakan Tak Segerak

Aliran biasa: hantar borang, tunggu hasilnya, kemudian menavigasi. push mengembalikan Promise yang boleh anda tunggu sehingga selesai.

async function login() {
  await auth.signIn(form)
  router.push('/dashboard')
}

Membaca Laluan Semasa

Untuk membaca parameter dan pertanyaan bagi laluan semasa, gunakan komposabel useRoute. Jangan kelirukannya dengan useRouter — useRoute ialah laluan, manakala useRouter ialah pengemudi.

import { useRoute } from 'vue-router'
const route = useRoute()

Mengakses Parameter

Baca segmen dinamik melalui route.params. Bagi laluan /user/:id, id berada pada route.params.id.

const userId = route.params.id

Mengakses Rentetan Pertanyaan

Baca rentetan pertanyaan melalui route.query. Bagi ?tab=profile, gunakan route.query.tab.

const tab = route.query.tab

Bertindak Balas terhadap Perubahan Parameter

Memandangkan route bersifat reaktif, pantau dengan watch untuk bertindak balas apabila parameter berubah semasa kekal pada komponen yang sama.

import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Semakan Pantas

Uji pengetahuan anda tentang navigasi terprogram.

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari navigasi terprogram:

useRouter() memberikan push, replace dan go.
push menambahkan sejarah; replace tidak menambahkannya; go(-1) kembali.
push menerima rentetan laluan atau objek { name, params, query }.
useRoute() membaca parameter dan pertanyaan semasa serta bersifat reaktif.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Navigasi Berprogram dan useRouter” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Navigasi Berprogram dan useRouter”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Navigasi Berprogram dan useRouter”?

Komposabel router.push(), router.replace(), router.go(), useRouter() dan useRoute(). Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Navigasi Berprogram dan useRouter” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy