4

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>切换页面的时候,进入页面并不会执行上述操作,但是点击浏览器的刷新却会执行。是因为钩子函数选错了吗?

2017-11-23 提问

查看全部 5 个回答

3

钩子函数选择错误,解决方法:

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

推广链接