vue单页面背景颜色修改

最近在做项目中，使用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')
}

vue单页面背景颜色修改

相关文章