Bu yazıda Vue.js'de Vue Router kullanımı ile Routing işlemlerinin nasıl yapılabileceğinden bahsedeceğim.
Öncelikle sisteminizde Node.js'in yüklü olması gerekiyor. Yüklü değilse bu linkten indirip gerekli kurulumu sağlayabilirsiniz. Sonrasında eğer sisteminizde Vue CLI yüklü değilse yüklemenizi öneririm. Vue.js projesi oluşturmak için olmazsa olmaz bir şey değil ancak bize sağladığı kolaylıkları göz ardı edemeyiz:
npm install -g @vue/cli
Şimdi de boş bir Vue.js projesi oluşturuyoruz. Template olarak ben webpack-simple'ı tercih ettim. Diğer template'ler için şu linke göz atabilirsiniz.
vue init webpack-simple vue-router-example
Proje dizinine gelip projenin çalışması için gerekli bağımlılıkları kuruyoruz:
npm install
Artık Vue Router kullanımına geçebiliriz.
Gerekli paketi kuruyoruz:
npm install vue-router --save
Proje dizininde bulunan src klasörünün altına components adında bir klasör oluşturuyoruz. Bu components klasörünün içerisine de Home, About ve Contact adında 3 adet vue uzantılı dosya oluşturuyoruz.
Home.vue dosyası içeriği;
<template> <div> Anasayfa ekranı </div> </template>
About.vue dosyası içeriği;
<template> <div> Hakkında ekranı </div> </template>
Contact.vue dosyası içeriği;
<template> <div> İletişim ekranı </div> </template>
Route tanımlamalarını yapmak adına src klasörünün altına router.js adında bir dosya oluşturuyoruz ve içeriğini şu şekilde dolduruyoruz:
import Vue from "vue"; import VueRouter from "vue-router"; import Home from "./components/Home"; import About from "./components/About"; import Contact from "./components/Contact"; Vue.use(VueRouter); const routes = [ { path: "/", component: Home }, { path: "/about", component: About }, { path: "/contact", component: Contact } ]; export const router = new VueRouter({ mode: "history", routes });
Burada yaptığımız işlemler;
- vue ve vue-router'ı import ettik.
- Home, About ve Contact component'lerini import ettik.
- Vue içerisinde VueRouter kullanacağımızı belirttik.
- Route tanımlamalarını yaptık. Buna göre url kısmında;
- "/" yazarsa Home component'i,
- "/about" yazarsa About component'i,
- "/contact" yazarsa Contact component'inin açılması gerektiğini söyledik.
- Yaptığımız tanımlamaları sabit (const) olarak dışarıya aktardık (export). mode olarak "history" yazarak url'de normal şartlarda oluşan "#" işaretini kaldırdık.
src klasörünün altında bulunan main.js dosyasını açarak router'ı dahil ediyoruz:
import Vue from 'vue'; import App from './App.vue'; import { router } from "./router"; new Vue({ el: '#app', render: h => h(App), router });
Son olarak src klasörü altında bulunan App.vue dosyasını açıyoruz ve içeriğini şu şekilde dolduruyoruz:
<template> <div> <router-link to="/" tag="a" class="link">Anasayfa</router-link> <router-link to="/about" tag="a" class="link">Hakkında</router-link> <router-link to="/contact" tag="a" class="link">İletişim</router-link> <hr/> <router-view></router-view> </div> </template> <style> .link { border: 1px solid #000; border-radius: 10px; padding: 5px; text-decoration: none; } </style>
Burada yaptığımız işlemler;
- Anasayfa, hakkında ve iletişim route'larına yönlendirmek adına 3 adet router-link koyduk.
- router-view ile yönlendirilen route'a tanımlanan component'in açılmasını sağladık.