Javascript 更改每个路线的Vue应用程序背景图像

我需要将背景图像添加到我的应用程序的某些路由中，并将其留空给其他路由

这是我的app.vue：

<template>
  <div id="app">
    <div class="h-100">
      <div class="bg" >
        <NavBar/>
        <router-view></router-view>      
      </div>
    </div>
    <Footer/>
  </div>
</template>

要尝试在/中添加图像，请使用my Home.vue的组件，如下所示：

<style >
.bg {
  height: 100%;
  background-image: url('../assets/equipo.jpg') !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<style >
 .bg {
   background-image: none;
 }
</style>

.bg{
身高：100%；
背景图片：url（'../assets/equipo.jpg'）！重要；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}

这使该图像成为所有应用程序的背景，因此我尝试在其中一个组件中删除它，其中我不希望背景图像是这样的：

<style >
.bg {
  height: 100%;
  background-image: url('../assets/equipo.jpg') !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<style >
 .bg {
   background-image: none;
 }
</style>

.bg{
背景图像：无；
}

这将从所有应用程序路由中删除映像。我还尝试了第二个组件的作用域样式，但不起作用

我认为问题是： 如何从子元素的作用域样式访问父元素？

在组件上，可以使用“作用域”样式：

//您的CSS在此-此CSS将只影响组件，而不会传播到其他组件。

您可能会用到这个。$parent，但是，为什么不创建computed prop并基于页面将类添加到页面上呢？您可以创建一个计算样式值，如此链接中所示，这可能是最佳选择。父级如何访问计算值？这不起作用，因为我要设置样式的元素正在包装父级的作用域组件。