Javascript Vue.js修改其他组件'；s风格

我正在使用带有Vue.js的Webpack创建一个大型web应用程序。我遇到的问题如下：

我正在使用vue router和以下结构作为主应用程序模板：

<customNav></customNav>
<router-view></router-view>

导航是单个文件组件，在组件文件中定义了自己的样式。假设它默认为黑色背景。现在，在单一的场合（当通过路由器显示不同的视图时），我希望它是透明的

我想我可能只是覆盖router view组件中的CSS，但这不起作用，因为Webpack捆绑了我导入的组件的所有CSS，我必须导入main.js中的所有组件以在路由器中定义它们。因此，覆盖组件中的样式将导致它成为全局默认样式，即使该组件甚至未被使用

如何解决此问题？

您可以借助VueJS。可以根据变量的值指定类。因此，在您的

customNav

中，您可以有两个类：say

black bg

和

transp bg

，您可以更改它，这将有助于变量：

blackBackground

<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>

我认为可以通过两种方式更改此变量：

• 将其作为实例数据，并根据当前路由进行更改
• 使其处于状态，并根据您的要求在不同的组件中进行更改

  ---

这看起来像是一种使用的方法，尽管它肯定会弄乱样式，因为现在我正在使用JavaScript进行样式设计-通常会有组件来防止这种情况。今晚我将尝试一下，并汇报它是如何工作的。谢谢你迄今为止的回答！