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()

  }