Vue实现独立修改单个页面的背景色，进入不同的页面设置不同的背景颜色【两种方式】

最新推荐文章于 2025-05-15 17:36:57 发布

水香木鱼

最新推荐文章于 2025-05-15 17:36:57 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：后台管理系统文章标签： vue.js 前端 javascript

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/127921699

后台管理系统专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用Vue.js在不同页面间动态更改背景颜色，通过路由和生命周期钩子实现背景色的平滑过渡，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

文章目录

简介：这是一篇有关【Vue实现独立修改单个页面的背景色，进入不同的页面设置不同的背景颜色】的文章，博主用最精简的语言去表达给前端读者们。

1、路由实现

beforeRouteEnter
beforeRouteLeave

export default {
  data() {
    return {}
  },
  
  // 组件内路由进入组件时
  beforeRouteEnter(to, from, next) {
    window.document.body.style.backgroundColor='#f2f3f8'
    next()
  },
  
  // 组件内路由离开组件时
  beforeRouteLeave(to, from, next) {
    window.document.body.style.backgroundColor=''
    next()
  }
}

2、生命周期实现

beforeCreate
beforeDestroy

export default {
  data() {
    return {}
  },
  
  //创建前设置
  beforeCreate () {
  	  // 例如设置为红色
      document.querySelector('body').setAttribute('style', 'background-color: red;')
  },
  
  // 销毁前清除（非必须,不清除的话完全可以,这块只不过告诉您可以这么玩）
  beforeDestroy () {
      document.querySelector('body').removeAttribute('style')
  },
}