Bildiğiniz gibi Nuxt 3 klasör yapısını rota olarak kullanıyor. pages/ klasöründeki dosyalara doğrudan rota olarak ulaşabiliyoruz. Örneğin pages/example.vue dosyamıza site.com/example adresinden doğrudan ulaşabiliriz. Bu yöntem her ne kadar büyük kolaylık sağlasa da ben kendi projelerimde rotaların benim kontrolümde olmasını tercih ederim.
Temiz bir örnek olması için boş bir Nuxt 3 projesi ile çalışmalara başlayalım. Siz kendi projenizde gerekli değişiklikleri uygun yerlerde yaparsınız.
Öncelikle projeyi oluşturalım.
|
1 |
npx nuxi@latest init nuxt3-custom-route-example |
Ardından app.vue dosyamızı aşağıdaki gibi değiştirelim.
|
1 2 3 |
<template> <NuxtPage /> </template> |
Böylelikle pages/ klasöründeki dosyaların okunmasını sağlamış olduk.
Şimdi de sayfalarımızı oluşturalım. Öncelikle pages/index.vue dosyamızı oluşturalım ve içeriğini yazalım.
|
1 2 3 4 5 |
<template> <div>Anasayfa</div> <NuxtLink to="/test">Test Sayfasına Git</NuxtLink> </template> |
Ardından pages/test.vue dosyamızı oluşturalım ve içeriğini yazalım.
|
1 2 3 4 5 |
<template> <div>Test Sayfası</div> <NuxtLink to="/">Anasayfaya Git</NuxtLink> </template> |
Şu anda dosya bazlı rota sisteminden dolayı proje hatasız çalışıyor olmalı. Sayfalar arasında geçiş yapmayı deneyebilirsiniz.
Şimdi de rota altyapısını değiştirmeye geçelim. Ben rotaları ayrı bir dosyada tanımlamak istediğim için öncelikle projenin kök dizinine routes.js adında bir dosya oluşturuyorum. Siz de oluşturun ve aşağıdaki içeriği ekleyin.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export const routes = [ { name: 'index', path: '/', file: '~/pages/index.vue' }, { name: 'test', path: '/test', file: '~/pages/test.vue' }, ] |
Ardından nuxt.config.ts içinde aşağıdaki gibi değişiklik yapın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// https://nuxt.com/docs/api/configuration/nuxt-config import type { NuxtPage } from "@nuxt/schema"; // Bu satırı ekleyin import { routes } from "./routes.js"; export default defineNuxtConfig({ // Bu bölümü ekleyin hooks: { 'pages:extend' (pages) { function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) { const pagesToRemove = [] for (const page of pages) { if (pattern.test(<string>page.file)) { pagesToRemove.push(page) } else { removePagesMatching(pattern, page.children) } } for (const page of pagesToRemove) { pages.splice(pages.indexOf(page), 1) } } removePagesMatching(/\.vue$/, pages) removePagesMatching(/\.ts$/, pages) routes.forEach(route => { pages.push(route) }) } }, }) |
Bu işlemleri tamamladıktan sonra anasayfa ve test sayfamız hâlâ çalışıyor olmalı.
Eğer isterseniz app.vue içeriğini aşağıdaki gibi değiştirerek mevcut rotaları görebilirsiniz.
|
1 2 3 4 5 6 7 8 9 |
<template> <NuxtPage /> </template> <script setup> const router = useRouter() const route = useRoute(); watch(() => route.path, () => { console.log(router.options.routes) }); </script> |
Son olarak index.vue içindeki NuxtLink satırını değiştirelim ve rota ismi ile yönlendirme yapalım.
Bunun yerine;
|
1 |
<NuxtLink to="/test">Test Sayfasına Git</NuxtLink> |
Bunu yazalım.
|
1 |
<NuxtLink :to="{ name: 'test' }">Test Sayfasına Git</NuxtLink> |
Böylelikle hem rotaların routes.js içinde tanımladığımız rotalar ile çalıştığını hem de isim ile rotaları çağırabildiğimizi görmüş olduk. Artık sayfalarımızı istediğimiz gibi alt klasörlere koyarak istediğimiz rotaları yazıp ulaşabiliriz.
Faydalı olması dileğiyle..
Bir sonraki yazıda görüşmek üzere.
İlk Yorumu Siz Yapın