Vue实现独立修改单个页面的背景色,进入不同的页面设置不同的背景颜色【两种方式】
Vue实现独立修改单个页面的背景色,进入不同的页面设置不同的背景颜色【两种方式】
·
博主介绍
📢点击下列内容可跳转对应的界面,查看更多精彩内容!
文章目录
简介:这是一篇有关【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操作手册【前端必备手册】
更多推荐
已为社区贡献20条内容
所有评论(0)