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

Posted 2023-01-06 水香木鱼

博主介绍

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

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

---

文章目录

简介：这是一篇有关【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')
  ,

---

精彩推荐

⭐流程图高级用法【Markdown进阶篇】
⭐Markdown使用手册【基础篇】
⭐npm package.json文件属性说明【前端必知】
⭐npm常用命令操作手册【程序员必备】
⭐Git操作手册【前端必备手册】