[Vue] Router Kullanımı
Bir Sayfa üzerinden Kullnıcı navigasyonları ile farklı sayfaları aynı sayfa içersinde gösterilebilmesi durumuna single page application deniyor.
bu yonlerndirmeleri Vue js te
VueRouter Kutuphanesi kullanılır
npm install --save vue-router // ile yüklenir. burdaki save flagini kaldırdığımız için package json dosyası güncellenir.
c
Main.js
import Vue from "vue"
import App from "./App.vue"
import VueRouter from "vue-router"; // npm den cektik mainde kullanıyoruz import diyip use dicyoruz asagıda
import { routes } from "./routes"; // baska js dosyasında tanımladık burda import edip kullancaz
Vue.use(VueRouter);
const router = new VueRouter({
routes : routes // bu sekilde de tanımlana bilir sağdaki de kaldırılabilir ecmascript 6. kendisi tamamlar mıs
mode: "history" // "hash" default tur # cıkar
});
new Vue({
el:'#app',
router:router
render: h=> h(App)
})
----------------------------------------------
routes.js. // bunu keyfi olarak olusturduk direk main icersine de yazabilirdik
import Home from "./components/Home";
import User from "./components/User";
export const routes = [
{ path: '', component : Home}, // path a hic bisey vermezsen ne olursa olsun bu calissin demek
{ path: '/user', component: User},
];
-----------------------------------------------
App.vue
Yorumlar
Yorum Gönder