时间戳

首页 > 解决方案 > 从同级路由器视图组件中更改插入到 App.vue 中的 NavBar 的背景颜色

css - 从同级路由器视图组件中更改插入到 App.vue 中的 NavBar 的背景颜色

问题描述

我正在尝试根据我所在的页面更改导航栏组件的背景和文本颜色，以删除与当前页面背景形成对比的颜色。有效地希望 TopNav 组件的明暗主题变体由我们当前所在的页面触发。

我的导航栏和页面模板如下：

<template>
  <v-app>
    <TopNav />          ------> This is the navbar component whos css i want to alter
    <v-content>   
      <router-view></router-view>    -----> Depending on what the current page injected is.
    </v-content>
    <Footer />
  </v-app>
</template>

使用<style>不带属性的标签scoped可以更改导航栏背景，但不幸的是，导航到另一个页面后它不会恢复。

标签： cssvue.jsvuetify.js

解决方案

从兄弟级别或子级别组件更改组件的状态实际上是一种反模式。

你最好的选择是使用一个完善的模式来获得你所追求的功能。

一种方法是引入 Vuex，并将您的亮/暗模式放在 Vuex 存储中（共享应用程序级状态管理）然后，您可以设置 TopNav 组件以绑定到 Vuex 状态中的值（this.$store.state.darkMode例如）然后，从应用程序的任何地方，您都可以提交一个突变来指定亮模式、暗模式、切换等...

或者，如果您希望它始终是特定于路由的（有点像这种情况），那么您可以设置您的路由定义，如下所示：

const routes = [
  {
    path: '/light-component',
    name: 'LightComponent',
    component: () => LightComponent,
    meta: {
      darkMode: false,
    },
  },
  {
    path: '/dark-component',
    name: 'DarkComponent',
    component: () => DarkComponent,
    meta: {
      darkMode: true,
    },
  },
];

然后，在任何组件（例如您的 TopNav 组件）中，您可以执行以下操作：

<template>
  <div :class="darkModeClass">

...

// inside <script> ...

computed: {
  darkModeClass() {
    return { dark: !!this.$route.meta?.darkMode };
  }
}

...

<style scoped>
  .dark {
    /* css styles for dark mode */
  }
</style>

推荐阅读