最近在做项目中，使用vue开发移动端项目，遇到一个小问题，路由跳转同时修改当前页面的背景色。

下面简单说一下vue单页面应用，由于vue的单页面应用导致我们的项目只有一个index.html文件，然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。

废话不多说直接上代码，亲测百分之百有效：

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){},
  methods: {},
  //实例创建之前钩子函数--给body添加行内样式
  beforeCreate () {
    this.$nextTick(()=>{
      document.body.setAttribute('style', 'background:#EAECF1')
    })
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy () {
    document.body.removeAttribute('style')
  }
};
</script>

<style lang="scss" scoped></style>

下面说下为什么要在beforeCreate钩子内部用this.$nextTick钩子包裹，this.$nextTick的作用是dom完全加载完成，所以我们改变body背景颜色是在操作dom

我也浏览了很多相关配置，绝大多数都是如下代码：(vue路由跳转页面不刷新，所以如下方案是不能动态改变body背景颜色，需要手动刷新页面。。。)

有没在此想问下广大博主，有真正的校验过自己的代码是否能够达到自己的需求呢。。。

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

beforeDestroy () {
  document.querySelector('body').removeAttribute('style')
}

  .cont{
     position: fixed;
     height: 100%;
     width: 100%;
     background: linear-gradient(red, blue); /* 标准的语法 */
  }

这样就得到了背景颜色的随机数 可以通过 :style 动态绑定backgroundColor实现