Vue'da header yapmak için iki yöntem bulunmaktadır: global referans ve yerel referans 1.
Global referans yöntemi:
- İki bileşen oluşturun:
header.vue
vefooter.vue
1. main.js
dosyasına gidip bu bileşenleri içe aktarın:import header from './components/Header'; import footer from './components/Footer';
1.Vue.component
fonksiyonunu kullanarak bileşenleri kaydedin:Vue.component('Header', header); Vue.component('Footer', footer);
1.- Son olarak,
App.vue
dosyasında bu bileşenleri tüm rotalarda kullanmak için<header></header> <router-view></router-view> <footer></footer>
kodunu ekleyin 1.
Yerel referans yöntemi:
- Yine
header.vue
vefooter.vue
bileşenlerini oluşturun 3. App.vue
dosyasında, bu bileşenleri sadece ihtiyaç duyulan sayfalarda içe aktarın:import header from './components/Header'; import footer from './components/Footer';
3.components
özelliğini kullanarak bileşenleri kaydedin:export default { name: 'about', components: { 'header': header, 'footer': footer } }
3.
5 kaynaktan alınan bilgiyle göre: