layouts/default.vue
<template>
<div class="page__container">
<app-header/>
<main class="page__content">
<Nuxt/>
</main>
<app-footer />
</div>
</template>
В header этого layout'a мне необходимо передавать title и subtitle, т.к. они меняются в зависимости от страницы. Я реализовал это следующим образом:
layouts/default.vue:
<template>
<div class="page__container">
<app-header :header-data="headerData"/>
<main class="page__content">
<Nuxt/>
</main>
<app-footer />
</div>
</template>
<script>
export default {
name: 'default-layout',
components: {AppHeader, AppFooter},
computed: {
headerData() {
return this.$route.matched.map(r => {
return r.components.default.options.headerData
})[0]
}
}
}
</script>
pages/index.vue и аналогичные страницы:
export default {
headerData: {
title: "Заголовок страницы",
subtitle: "Подзаголовок страницы"
}
}
app-header.vue:
<template>
<header>
<h1>{{headerData.title}}</h1>
<span>{{headerData.subtitle}}</span>
</header>
</template>
<script>
export default {
name: "app-header",
props: {
headerData: {
type: Object,
required: true
}
},
}
</script>
Насколько правильно такое решение? Можно ли сделать это более лаконично?
