vue单页面背景颜色修改

最新推荐文章于 2023-11-02 19:59:22 发布

皮蛋灬

最新推荐文章于 2023-11-02 19:59:22 发布

阅读量3.6k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/vscode_js/article/details/119206530

版权

本文介绍了在Vue单页面应用中如何在路由跳转时动态修改页面背景色。通过在beforeCreate钩子中使用this.$nextTick确保DOM加载完成后设置body的背景色，并在beforeDestroy钩子中移除样式。代码示例展示了在Vue组件中如何正确实现这一功能，以避免页面刷新才能看到背景色变化的问题。

摘要由CSDN通过智能技术生成

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