Question

我正在使用nuxt，并且我的导航有一个标题布局。此导航的背景颜色为白色。

在特殊页面上，我想使导航背景颜色透明。（仅限此页面）

我尝试过这些：

这将使背景对所有页面透明。（我不想要）

<style lang="css">
nav {
background-color: rgba(0, 0, 0, 0);
}

这行不通，因为我的导航不在此页面中，而是包含在nuxt布局中。

<style lang="css" scoped>
nav {
background-color: rgba(0, 0, 0, 0);
}

也尝试过！important，但这是行不通的。

除了使用标题透明的新布局外，您还有其他建议吗？

Answer 1

在此特殊页面的正文中包含类名称：

<body class="special">

然后在CSS中包含仅适用于此页面的导航规则：

body.special nav {
  background-color: rgba(0, 0, 0, 0);
}

Answer 2

您可以拥有两个身体课：

示例，例如首页

<body class="home">

还有另一页

<body class="other">

然后在您的CSS中这样指定

body.home nav{background-color: white;} 
body.other nav{background-color: transparent;}

Answer 3

我可以想到各种各样的解决方案，它们具有不同程度的hackiness。

简单-最可靠-直接DOM操作这是特定于Vue / Nuxt的内容。您可以将一个类添加到元素中，然后在所需组件的正确生命周期方法中，将另一个具有所需样式的类附加到

更多工作-仍然可靠-Vuex商店使用Vuex商店存储要从组件传递到布局的所有道具。感觉仅设置背景颜色就显得过于矫kill过正。但是谁知道您将来还会想要设置什么，并且开设Vuex商店并不难。

更多工作-最少可以实现-路由器防护您可以添加特定的路线检查，以设置到达特定路线或路线包含特定字符串等时的背景颜色。这不是一个好的解决方案，因为如果路线发生更改，将来很有可能被破坏。