VueJS Router Kullanımı

Herkese merhabalar,bildiğim kadarıyla sizlere vue routeri anlatmaya çalışacağım.

Router Neden Kullanırız ?

SPA uygulamalarda sayfa içerisinde gezinmek için kullandığımız yapılardır.

Proje Oluşturma

vue create router-app

ardından terminal ekranında npm run serve diyerek projeyi ayağa kaldırıyoruz

Vue-Router Kurulumu

npm install vue-router
# veya vue cli ile
vue add router

adımları izlenerek ilgili projeye router eklenir.

Ardından src/router.js adında bir dosya oluşturulur.

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const Anasayfa = { template: '<div>Anasayfa</div>' }
const Kullanicilar = { template: '<div>Kullanıcılar</div>' }
export default new Router({
mode: "history",
routes: [
{
 path:'/Anasayfa',
 component:Anasayfa,
},
{
 path:'/Kullanıcılar',
 component:Kullanicilar,
},
{path: "*", redirect: "/Anasayfa"},
]  
})

Kısaca açıklayacak olursak routeri dışarıya export ederken routerdan yeni bir örnek alıp ilgili tanımlamalarımızı gerçekleştirdik.

mode:”History”,”Hash” gibi değerler alır (hash urllere /#/kullanıcılar şeklinde history ise /kullanıcılar şeklinde erişmemizi sağlar),

path: Tarayıcıdan hangi url ile erişeceğimizi belirtir.

İlgili router tanımlamalarımız tamalandıktan sonra, src/App.vue dosyasına ilgili routerları nereye render edeceğimizi <router-view/> etiketi kullanarak belirtebiliriz.

App.vue dosyamızın görüntüsü.

<template>
  <div id="app">
     <router-view/>
  </div>
</template>

Son olarak src/Main.js dosyamıza ilgili router dosyamızı import edelim.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({  router,render: (h) => h(App),}).$mount("#app");

vue router kullanarak,sayfaları nasıl render edeceğimizi görmüş olduk.

Daha detaylı bilgiler için vue-router dökümanını okuyabilirsiniz.

Herkese İyi Çalışmalar :)