vue之修改单页面背景颜色

vue的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生 *** 控各自的body节点，因为所有的页面都拥有同一个body。这就难受了，如果希望设置单个页面的背景颜色而又不影响其他页面，那怎么办？

第一种方式（不建议）

beforeCreate() { document.querySelector('body').setAttribute('style','background-color:rgb(245,245,245)')},

beforeDestroy(){ document.querySelector('body').setAttribute('style', "background-color:''")}

第二种

beforeRouteEnter(to, from, next) {

    // 添加背景色document.querySelector('body').setAttribute('style', 'background-color:#f9f9f9')

    next()

  },

  beforeRouteLeave(to, from, next) {

    // 去除背景色document.querySelector('body').setAttribute('style', '')

    next()

  }

效果图：实现每次刷新都是不同的背景颜色

实现步骤：

1.将随机背景颜色的函数创建出来，bc（），同时获取后台数据，数据是存在vuex中，所以使用...mapState的方式获取

2.将color属通过forEach循环添加进后台数据中，等渲染页面的时候使用

3.通过for循环渲染页面，在需要背景颜色的地方用:style的方式实现

在mouted方法中调用播放音乐方法

通过上述code可以完成进入页面自动播放背景音乐

但是ios手机需要点击页面任意一个地方才能开始播放

⚠️注意：上面audio标签中不能设置muted 属性，设置完之后 无论如何ios都播放不了

---