Vue 各组件为body设置css样式的问题

Question

1.需求：不同组件的body，背景色不一样。

2.参考的解决方案：

<script>
export default {
  //...前面的省略
  //通过两个钩子函数来添加移除class改变颜色
  beforeCreate: function() {
      document.getElementsByTagName("body")[0].className="add_bg";
  },
  beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg");
  }
}
</script>
<style>
.add_bg{
    background: #f0f0f0;
}
</style>

3.问题：
通过 <router-link>切换页面的时候，进入页面并不会执行上述操作，但是点击浏览器的刷新却会执行。是因为钩子函数选错了吗?

Answer 1

钩子函数选择错误，解决方法：

mounted: function() {
    document.getElementsByTagName("body")[0].className="add_bg"; 
}

Answer 2

是不是设置了keepalive 那样的话需要在activated也写上处理程序

Answer 3

有一个办法是 vuex，其实不用设置是body，设置 id="app"的就可以。
在app.vue中computed一个变量比如叫 color，这个变量存储的是不同的页面应该显示的背景色，
然后<div id="app" :style={background:color}></div>，即给他绑定一个style，每次路由跳转时，提交commit去修改这个state，即可实现效果。

Answer 4

可以在路由的 meta 里面为每一个路由设置不同的背景色,在 route.beforEach遍历内部为 body 更换背景色

Answer 5

控制组件外部元素(例如#app body)的样式的实践:
例如, 我要控制不同路由页面的#app的paddingBottom,
如果要设置默认值的话,
首先, 在App.vue文件下设置paddingBottom, 假设为70px, 则所有页面都会应用到这一样式, 是为默认值
其次, 如果想在不同页面设置特殊样式值, 例如在某页面下要设置paddingBottom为40px, 则这样做

beforeCreate() {
  // 页面创建时设置
  document.querySelector('#app').style.paddingBottom = '40px';
},
beforeDestroy() {
  // 页面退出时设置回默认, 如果无这一步的话, 上面修改的样式40px会影响到所有页面
  document.querySelector('#app').style.paddingBottom = '70px';
}