404 Nedir?
Öncelikle "404" hatasının neden kaynaklığını bilmeyenler için açıklamak isterim. Genelde "4xx" hatalar kullanıcı taraflı olup kullanıcının yaptığı bir işlem sonucu açığa çıkarlar. "404" hatası da yine bu sebepten ortaya çıkmaktadır. Bu hatanın adı aynı zamanda "Not Found - Bulunamadı" olarak da isimlendirilir. Genelde bu hatanın sebebi, kullanıcı sitede olmayan bir linke giriş yapmaya çalıştığında "404" hatası ile karşılaşır. Bazı sitelerde olmayan bir url'e istek geldiğinde direkt olarak anasayfaya yönlendirilirken bazı sitelerde "404.html" adlı bir dosya ile kullanıcıya bilgi döner. Bugün bende bu sayfanın Vue'da "vue-router" paketini kullanarak bunu nasıl yapacağız bunu göstereceğim.
Proje Kurulumu
Vite ile basitçe projemi kuracağım. Ben "yarn" ile kuruluma ve indirme işlemlerine devam edeceğim siz isterseniz npm, pnpm ya da türevlerini kullanabilirsiniz.
yarn create vite
Bu komut satırını çalıştırdıktan sonra karşınıza üç soru gelecektir. Öncelikle proje isminizi belirtmenizi isteyecek buraya herhangi bir isim yazabilirsiniz ki ben "errorpage" olarak bir isim verdim. İkinci soruda size hangi framework ile projenin kurulmasını istediğinizi soracak burada yön tuşları ile "Vue" yazısını seçip "enter" tuşuna basın. Son soruda ise "variant" soracak burada yine yön tuşları ile "Javascript" seçip "enter" tuşuna basın. Sonrasında proje klasörüne girip paketleri yüklememiz gerekli bunun için aşağıdaki kodları çalıştırabilirsiniz.
Not: "cd errorpage" kısmında "errorpage" yazan yere kendi proje adınızı girmeniz gerekmekte.
cd errorpage
yarn install
yarn add vue-router@4
Tüm kurulumları yaptık. Şimdi "src" dosyası içerisinde "router" adında bir klasör oluşturalım ve içinde de "index.js" adlı dosyamızı oluşturalım.
Vue'da router oluşturmak oldukça basit. "index.js" dosyasını açalım ve içerisini aşağıdaki gibi dolduralım.
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
name: 'home',
path: '/',
component: Home
},
{
name: 'about',
path: '/about',
component: About
},
{
path: '/:catchAll(.*)*',
redirect: { name: 'home' }
component: () => import('../views/NotFound.vue')
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
})
export default router
Şimdi ise "router"ımızı app genelinde tanımlayalım bunun için "main.js" dosyasını açın ve aşağıdaki gibi düzenleyin.
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router/index.js";
createApp(App).use(router).mount("#app");
const app = createApp(App)
app.use(router)
app.mount("#app")
Daha sonra "App.vue" dosyamızı açıp içini aşağıdaki gibi dolduralım.
<template>
<ul>
<li>
<router-link :to="{name: 'home'}">Ana Sayfa</router-link>
</li>
<li>
<router-link :to="{name: 'about'}">Hakkımızda</router-link>
</li>
<li>
<router-link to="/testsayfa">Hata Verdirecek Sayfa</router-link>
</li>
</ul>
<router-view></router-view>
</template>
"src/views/Home.vue" dosyasına girelim ve aşağıdaki kodları ekleyelim.
<template>
<h1>Ana Sayfa</h1>
</template>
"src/views/About.vue" dosyasına girin ve aşağıdaki kodları ekleyin.
<template>
<h1>Hakkımızda</h1>
</template>
Daha sonrasında aşağıdaki komut ile projeyi çalıştıralım ve uygulamayı test edelim.
yarn dev
"Ana Sayfa" ve "Hakkımızda" sayfasına girdiğiniz zaman sayfa içeriği doğru bir şekilde yüklenilirken test amaçlı oluşturduğumuz "Hata Verdirecek Sayfa" linkine tıkladığımızda eğer "redirect" yaptıysanız "Ana Sayfa"ya "component" kullandıysanız ise kullanmış olduğunuz "component" görüntülenecektir.
"src/routers/index.js" dosyasında "routes" dizisinde kullanmış olduğumuz "catchAll" tüm "route" yolları denendikten sonra en son kullanılacak olan "route"dur.
Ekstra olarak "Vue Router"ın kendi dökümanında "404" sayfası için "'/:pathMatch(.*)*" kullanılıyor. Yazının sonunda link olarak bırakacağım detaylı olarak inceleyebilirsiniz.
Zaten yazımın da sonuna gelmiş bulunuyoruz. İlk yazım olduğu için eksiklerim veya hatalarım var ise mazur görmenizi ve bunları yorum olarak bırakmanızı isterim. Bir sonraki yazılarımda görüşmek üzere kodlamayla kalın.
Vue Router Dökümanı
