Стиль заголовка страницы (вид маршрутизатора) в Vue.js

Question

Немного предыстории ...

Это может показаться основной проблемой или чем-то, что можно легко решить с помощью $emit, однако, я думаю, что события могут быть немного излишними для того, что я пытаюсьчтобы достичь, и как таковой, хотел бы видеть, есть ли у кого-либо альтернатива, либо по замыслу, либо по чему-то, чего я не знаю в Vue ...

Рассмотрим следующую структуру:

App.vue

<template>

    <div id="app">

        <!-- Include the main site header -->
        <main-header></main-header>

        <!-- Include the content of the current page -->
        <router-view></router-view>

    </div>

</template>

<script>

    import Header from 'core-js/components/core/Header';

    export default {

        components: {
            'main-header': Header
        }

    }

</script>

SomePage.vue - просмотр содержимого маршрутизатора

<template>

    <main id="main-content" role="main">

        <!-- All the page content here... -->

    </main>

</template>

<script>

    export default {

        // Set the component properties here...

    }

</script>

Что яна самом деле пытается достичь!?

Обратите внимание, что компонент main-header является родственным компоненту router-view ... Очень просто, я хотел бы добавить class к компоненту main-header на основедля содержимого router-view.

Например, предположим, что SomePage.vue имеет темное содержимое, мы хотим добавить класс light к компоненту main-header.

Я ценю, что это можно исправить за считанные секунды с помощью $emit, но я не решаюсь использовать события на чем-то столь простом.

Короче говоря, может ли кто-нибудь предложить альтернативное решение событий Vue или лучшую структуру дизайна?

Дополнительная информация

Просто чтобы прояснить, чего я пытаюсь достичь, см.следующий App.vue шаблон:

<template>

    <div id="app">

        <!-- Include the main site header -->
        <main-header :class="{ light: lightHeader }"></main-header>

        <!-- Include the content of the current page -->
        <router-view></router-view>

    </div>

</template>

<script>

    import Header from 'core-js/components/core/Header';

    export default {

        components: {
            'main-header': Header
        },

        data() {
            return {
                lightHeader: false
            }
        }

    }

</script>

Тогда SomePage.vue каким-то образом установит для lightHeader значение true ...

Answer 1

Вы можете добавить мета-поле к каждому маршруту в router.ts, например, так:

routes: [{
    name: 'header',
    component: Header,
    meta: {
        headerClass: 'light'
   }
}]

Тогда вы будете использовать его в своем шаблоне, например:

<template>    
    <div id="app">    
        <main-header :class="$route.meta.headerClass"></main-header>
        <router-view></router-view>    
    </div>    
</template>

См.пример, который я сделал здесь: https://jsfiddle.net/wugq6typ/