为每条路线更改 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

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

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