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/