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

Question

我需要在我的应用程序的一些路由中添加背景图片，其他的留空

这是我的 app.vue：

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

要尝试在 / 中添加图像，请使用我的 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>

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

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

Answer 1

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

<style scoped>
// your CSS here - this CSS will only affect the component and not propagate to other components.
</style>