Guard Navigasi
Lindungi rute dan jalankan logika saat navigasi dengan guard.
Guard Navigasi adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Apa Itu Penjaga Navigasi
Penjaga navigasi memungkinkan Anda menjalankan kode sebelum, selama, atau setelah perubahan route.
- Memblokir atau mengalihkan navigasi
- Memeriksa autentikasi
- Meminta konfirmasi sebelum meninggalkan halaman
Jenis-Jenis Penjaga
Ada tiga tingkat penjaga:
- Penjaga global dijalankan untuk setiap navigasi
- Penjaga per-route dijalankan untuk satu route tertentu
- Penjaga di dalam komponen dijalankan di dalam sebuah komponen
Penjaga Global beforeEach
router.beforeEach dijalankan sebelum setiap navigasi. Fungsi ini menerima route tujuan dan route saat ini.
router.beforeEach((to, from) => {
console.log("going to", to.path)
// return true to allow,
// or a route to redirect
})Mengizinkan atau Mengalihkan
Dalam Vue Router 4, kembalikan sebuah nilai untuk mengendalikan alurnya.
- Kembalikan benar atau tidak mengembalikan apa pun untuk mengizinkan
- Kembalikan salah untuk membatalkan
- Kembalikan lokasi route untuk mengalihkan
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
return { name: "login" }
}
return true
})Bidang Meta route
Tambahkan data meta khusus ke route, seperti requiresAuth, lalu baca data tersebut di dalam penjaga.
const routes = [
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true }
}
]Penjaga Autentikasi
Pola yang umum adalah melindungi route dengan memeriksa autentikasi di dalam penjaga global.
router.beforeEach((to) => {
const authed = localStorage.getItem("token")
if (to.meta.requiresAuth && !authed) {
return { name: "login", query: { redirect: to.fullPath } }
}
})beforeEnter Per-route
beforeEnter menjaga satu route secara langsung dalam definisinya.
const routes = [
{
path: "/admin",
component: Admin,
beforeEnter: (to, from) => {
return isAdmin() ? true : { name: "home" }
}
}
]Penjaga di Dalam Komponen
Komponen dapat menentukan penjaganya sendiri. onBeforeRouteLeave dijalankan ketika melakukan navigasi keluar.
import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from) => {
if (hasUnsavedChanges.value) {
return window.confirm("Leave without saving?")
}
})onBeforeRouteUpdate
onBeforeRouteUpdate dijalankan ketika route berubah, tetapi komponen yang sama digunakan kembali, yaitu saat parameter berubah.
import { onBeforeRouteUpdate } from "vue-router"
onBeforeRouteUpdate((to) => {
loadUser(to.params.id)
})Callback next (Gaya Klasik)
Kode lama menggunakan argumen ketiga, next, untuk mengendalikan navigasi. Mengembalikan sebuah nilai kini lebih disarankan.
// Classic style with next()
router.beforeEach((to, from, next) => {
if (canAccess(to)) {
next() // proceed
} else {
next("/login") // redirect
}
})Nilai Kembalian vs next()
Dua gaya dengan tujuan yang sama:
- Mengembalikan nilai (modern dan lebih bersih): benar, salah, atau sebuah lokasi
- Memanggil fungsi lanjutan (klasik): melanjutkan atau mengalihkan
Jangan mencampur keduanya dalam penjaga yang sama. Gaya pengembalian direkomendasikan untuk kode baru.
Uji Cepat
Uji pemahaman Anda tentang penjaga navigasi.
Ringkasan: Penjaga Navigasi
Anda telah mempelajari cara mengendalikan navigasi:
- Penjaga global beforeEach dijalankan untuk setiap route
- Kembalikan true untuk mengizinkan, false untuk membatalkan, atau sebuah lokasi untuk mengalihkan
- Bidang meta seperti requiresAuth mengatur pemeriksaan autentikasi
- beforeEnter menjaga satu route
- Penjaga di dalam komponen seperti onBeforeRouteLeave menangani proses meninggalkan halaman
Anda telah menyelesaikan kursus dasar Vue.js!
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
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Guard Navigasi” gratis?
Ya — teks lengkap “Guard Navigasi” 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 “Guard Navigasi”?
Lindungi rute dan jalankan logika saat navigasi dengan guard. 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 3 dari 3.
Berapa lama pelajaran “Guard Navigasi” 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