Vue3 ile 404 Sayfası Oluşturma

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'

//Routes dizini projemizde olacak url'leri belirtmemize yarar
const routes = [
  {
    name: 'home',
    path: '/',
    component: Home
  },
  {
    name: 'about',
    path: '/about',
    component: About
  },
  // "/:catchAll(.*)*" => 404 sayfamızı oluşturmamız için "vue-router" ile birlikte gelen özel url yoludur.
  {
    path: '/:catchAll(.*)*',
    //Burada ise eğer kullanıcı, bulunmayan bir url istek attığı zaman otomatik olarak "home" url'ine yani "/" url'ine yönlendirilir.
    redirect: { name: 'home' }
    //Yönlendirme yerine bir hata sayfası göstermek istiyorsanız ise diğer route'larımızda olduğu gibi burada da component kullanabilirsiniz.
    component: () => import('../views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  //Buradaki "routes" aslında "routes:routes" anlamına gelmektedir.
  //Fakat sadece "routes" yazsak bile bunu kendisi halledecektir.
  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");

//Alternatif olarak bunu da kullanabilirsiniz
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ı