如何改变vue 单页面body的背景颜色

项目开发中我们有时候会为vue 不同的单页面设置不通的body 的颜色，总结一下三种方法

1. 利用fixed

div{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    position: fixed;

}

image.png

2. 利用beforeCreate和beforeDestroy

beforeCreate () {
      document.querySelector('body').setAttribute('style', 'background-color:#efeff4;')
    },
 
    beforeDestroy () {
      document.querySelector('body').removeAttribute('style')
    }

3.利用组件内的路由实现

beforeRouteEnter(to,form,next){
window.document.body.style.backgroundColor="#F5F5F5"
next()
}

beforeRouteLeave(to,form,next){
window.document.body.style.backgroundColor="#F5F5F5"
next()
}