Vue Academy · Ders

Route Meta Alanları ve Tür Tanımlama

meta: { requiresAuth: true }, türü belirlenmiş meta için TypeScript bildirim birleştirme.

1. ders / 413 adım

Route Meta Alanları ve Tür Tanımlama, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Rota Üstveri Alanları Nelerdir?

Her rota bir üstveri nesnesi taşıyabilir: rotaya eklenmiş rastgele veriler. Bu nesne, kimlik doğrulama gereksinimleri, izin verilen roller, sayfa başlıkları veya yerleşim seçenekleri gibi bayraklar için idealdir.

Bir Rotaya Üstveri Ekleme

Bir rota kaydında meta anahtarını ayarlayın. Değerleri tamamen siz belirlersiniz.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'editor'] }
  }
]

Bir Koruyucuda Üstveriyi Okuma

En yaygın kullanım gezinme koruyucusudur. router.beforeEach her gezinmeden önce çalışır ve üstverisini inceleyebileceğiniz hedef rotayı alır.

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    // check login
  }
})

Kimlik Doğrulaması Yapılmamış Kullanıcıları Yönlendirme

Yönlendirmek için koruyucudan bir rota konumu döndürün. false döndürmek gezinmeyi iptal eder; hiçbir şey veya true döndürmek gezinmeye izin verir.

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { path: '/login' }
  }
})

Role Dayalı Erişim

Sayfalara izin temelinde erişimi sınırlamak için roles üstveri alanını geçerli kullanıcının rolüyle birleştirin.

router.beforeEach((to) => {
  const auth = useAuthStore()
  const roles = to.meta.roles
  if (roles && !roles.includes(auth.role)) {
    return { path: '/forbidden' }
  }
})

Üstveri Üst Rotalardan Birleştirilir

İç içe rotalar, tüm eşleşen kayıtları birleştiren to.meta aracılığıyla üst rotalarından üstveri devralır. Bir alt rota, aynı anahtarı geçersiz kılmadığı sürece üst rotanın üstverisini görür.

Tür Belirleme Sorunu

Varsayılan olarak TypeScript, meta alanının türünü boş bir nesne olarak belirler; bu nedenle to.meta.requiresAuth hata verir. Bunu Vue Router türleriyle bildirim birleştirme kullanarak düzeltirsiniz.

Türü Belirlenmiş Üstveri Tanımlama

vue-router içindeki RouteMeta arayüzünü genişletin. Bunu bir .d.ts dosyasına veya export {} içeren herhangi bir modüle yerleştirin.

import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

export {}

Artık Üstveri Tür Denetiminden Geçiyor

Genişletmeden sonra derleyici, meta alanının yapısını bilir. requireAuth gibi yazım hataları yakalanır ve otomatik tamamlama çalışır.

router.beforeEach((to) => {
  if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})

Bileşenlerde Üstveriyi Kullanma

Bir bileşenin içinde geçerli rotanın üstverisini useRoute() aracılığıyla okuyabilirsiniz; genişletme sayesinde bunun türü de belirlenmiştir.

import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuth

Sayfa Başlıkları için Üstveri

Yaygın bir yaklaşım şudur: üstveride bir title saklayıp genel bir koruyucudan document.title değerini ayarlamak.

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title
})

Hızlı Kontrol

Rota üstverisi ve tür belirleme konusundaki bilginizi sınayın.

İnteraktif derste cevapla

Özet

Rota üstveri alanları rota başına veriler taşır:

Rota kayıtlarında üstveri tanımlayın (requiresAuth, roles, title).
Gezinmeyi korumak için bunu router.beforeEach içinde okuyun.
Üstveri, üst rotadan alt rotalara birleştirilir.
vue-router içindeki RouteMeta üzerinde bildirim birleştirme kullanarak türünü belirleyin.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Route Meta Alanları ve Tür Tanımlama” dersi ücretsiz mi?

Evet — “Route Meta Alanları ve Tür Tanımlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Route Meta Alanları ve Tür Tanımlama” dersinde ne öğreneceğim?

meta: { requiresAuth: true }, türü belirlenmiş meta için TypeScript bildirim birleştirme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Route Meta Alanları ve Tür Tanımlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön