Nuxt 中每个页面的唯一背景图像答案

【问题标题】：Unique background-image for each page in NuxtNuxt 中每个页面的唯一背景图像
【发布时间】：2021-06-12 15:58:05
【问题描述】：

正如标题所说，我正在尝试为我的应用程序中的每个页面获取唯一的背景图像。目前我在style/app.scss 中定义了我的背景图像。

@import 'variables';
@import 'page_transition';
@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');
body{
  font-family: 'Open Sans', sans-serif;; // Globale font definitie
  background-image: url('../../static/background.png');
  background-repeat: no-repeat;
  background-color: $darkPurple;
  scroll-behavior: smooth;
}

到目前为止我已经尝试过：

在默认布局中将背景 url 动态添加到包装器中。 结果：包装器不是主体，所以它不是我想要的结果。

添加

body {
  background-image: url('../../static/background.png');
}

在<style> 中为每个带有scoped 的页面。 结果：给予 body 的样式被忽略。 也做了同样的事情，但没有scoped。 结果：每个页面都有相同的背景。

在这些尝试中，我当然评论了 style/app.scss 中定义背景的 css 行

【问题讨论】：

页面是动态创建的吗？或者您的 pages 目录中是否为应用程序中的每个页面都有一个文件？您可以采用不同的方法，具体取决于您面临的情况。
每个 .vue 页面都位于一个专门用于页面的目录中。
好的，现在您可以使用您使用的代码更新您的问题，您尝试在其中“为每个具有范围的页面定义样式中的正文背景”，以及您的 app.scss 文件的内容.这将非常有帮助:)
我已经更新了这个问题，希望它现在清楚了。

标签： css vue.js sass nuxt.js

【解决方案1】：

在每个页面中，在mounted()钩子中设置body元素的背景属性。

例如。

export default {
  mounted() {
    document.body.style.backgroundColor = 'blue'
  }
}

或者对于图像，假设您在/static/images/bg1.jpg 有一个图像文件。

export default {
  mounted() {
    document.body.style.backgroundImage = "url('/images/bg1.jpg')"
  }
}

请记住，当在每个页面上调用 mounted() 挂钩时，您是在直接操作 DOM。如果您在任何页面上排除此方法，则背景图像不会更改 - 它将与您导航的页面保持相同。

【讨论】：

非常感谢，这个问题困扰我很久了。