css - Nuxt.js 布局的作用域 css

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

我能想到各种解决方案，但有不同程度的技巧。

简单 - 最可靠 - 直接 DOM 操作这是较少的 Vue/Nuxt 具体的。您可以只向元素添加一个类，然后在期望组件正确的生命周期方法中附加另一个具有所需样式的类

更多工作 - 仍然可靠 - Vuex 商店使用 Vuex 商店来存储您想要从组件传递到布局的任何 Prop 。感觉只是简单地设置背景颜色有点矫枉过正。但是谁知道你将来还想设置什么，设置一个 Vuex store 并不难。

更多工作 - 最不可靠 - Router Guards您可以添加特定的路线检查，以在到达特定路线或路线包含特定字符串等时设置背景颜色。这不是一个好的解决方案，因为如果路线发生变化，将来它被破坏的可能性最大.