博主介绍

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

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


文章目录

简介:这是一篇有关【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操作手册【前端必备手册】

Logo

前往低代码交流专区

更多推荐