Vue Academy · Ders

Vue Router'ı Kurma

Vue Router'ı kurun ve ilk route'larınızı tanımlayın.

Vue Router'ı Kurma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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 3 dersten oluşur.

Vue Router Nedir?

Vue Router, Vue için resmî yönlendirme kitaplığıdır.

URL'leri bileşenlerle eşler
Sayfanın tamamını yeniden yüklemeden tek sayfalı gezinmeyi mümkün kılar
Geçmişi, bağlantıları ve parametreleri yönetir

Vue Router'ı Yükleme

npm ile projenize Vue Router ekleyin.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Yönlendirme Bileşenleri Oluşturma

Her yönlendirme bir bileşeni oluşturur. Basit sayfa bileşenleriyle başlayın.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

routes Dizisini Tanımlama

Bir routes dizisi, yolları bileşenlerle eşler.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

createRouter işlevi, routes ve bir geçmiş kipi kullanarak bir yönlendirici oluşturur.

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistory, /about gibi temiz URL'ler için HTML5 geçmiş API'sini kullanır.

URL'de karma işareti bulunmaz
Doğrudan alt bağlantıların çalışması için sunucu yapılandırması gerekir
Alternatif, createWebHashHistory'dir (/#/about)

Yönlendiriciyi Kaydetme

Yönlendiriciyi app.use ile app içine yükleyin.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

router-view bileşeni, eşleşen yönlendirme bileşeninin oluşturulduğu yerdir.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

Gezinme için düz bağlantı etiketleri yerine router-link kullanın. Bu, sayfanın tamamının yeniden yüklenmesini önler.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

Etkin Bağlantıların Biçimlendirilmesi

router-link, etkin bağlantıya otomatik olarak CSS sınıfları ekler.

Kısmi eşleşmeler için router-link-active
Kesin eşleşmeler için router-link-exact-active

Geçerli sayfayı vurgulamak için bu sınıfları biçimlendirin.

Hepsini Bir Araya Getirme

Tam akış şöyledir:

Yolları bileşenlerle eşleyen yönlendirmeleri tanımlayın
createRouter ve createWebHistory ile yönlendiriciyi oluşturun
app.use(router) ile kaydedin
router-view yerleştirin ve router-link ile gezinin

Hızlı Kontrol

Vue Router kurulumu hakkındaki anlayışınızı sınayın.

Özet: Vue Router'ı Kurma

İstemci tarafı yönlendirmeyi kurdunuz:

npm install vue-router ile yükleyin
Bir routes dizisi tanımlayın
createWebHistory ile createRouter oluşturun
app.use(router) ile kaydedin
router-view ve router-link kullanın

Sırada: iç içe ve dinamik yönlendirmeler.

Sıkça Sorulan Sorular

“Vue Router'ı Kurma” dersi ücretsiz mi?

Evet — “Vue Router'ı Kurma” 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 3 dersten oluşur.

“Vue Router'ı Kurma” dersinde ne öğreneceğim?

Vue Router'ı kurun ve ilk route'larınızı tanımlayın. 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, 3 dersinin 1. dersidir.

“Vue Router'ı Kurma” 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