vue项目在body设置公共的背景前提下，区分首页背景图和其他页面背景图

本文链接：https://blog.csdn.net/qq_33911541/article/details/132096632

1.需求：在vue项目已设置统一的body背景图的前提，单独给首页换一个背景图，然后其他页面背景图不变的临时需求

实现思路1：在首页home.vue中

在公共的style.css文件中写上两个背景样式（写在公共样式中是因为style.css比组件内部的先加载，避免页面出现后背景空白的问题）

body {
 (添加这个样式是为了在除首页之外的页面刷新页面时，会丢失otherBg类名，导致其他页无背景图片的情况)
  margin: 0;
  padding: 0;
  background: url(../img/bg.gif) no-repeat 100px 60px #1a1a58;
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow-x: hidden
}

.homeBg{
  background: url(../img/bgNew.jpg) no-repeat 100px 60px #1a1a58;（以下多余的样式是为了使背景图铺满屏幕）
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow-x: hidden
}

.otherBg{
  background: url(../img/bg.gif) no-repeat 100px 60px #1a1a58;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background