vue body的背景图片属性设置方式
更新时间：2025年08月20日 17:24:19 作者：AI小奶龙
在Vue中,背景图跨页面显示问题可通过生命周期钩子（如mounted和beforeDestroy）实现动态控制,确保仅在主页加载背景图,登录页等其他页面可移除,从而实现差异化样式应用
vue body的背景图片属性设置
html {
height: 100%;
}
/* 设置整个页面的样式 */
body{
/* 引用图片路径 */
background-image: url("../assets/img/shouye.jpg");
/* background-repeat只显示一个图片 */
background-repeat: no-repeat;
/* background-size
将一个图片撑满一个页面 */
background-size: 100% 100%;
}在body中使用background-image我们会遇到以下问题
只想在一个页面中使用这张背景图，但是在别的页面中也会显示，如：
如图，我只想在主页面显示这张背景图，可是在登录页面中也被使用了。
后来通过查阅相关资料，我明白了vue的生命周期的使用。
在主页面加入这两个方法
// 组件内路由进入组件时
beforeRouteEnter(to, from,next){
window.document.body.style.backgroundImage=''
next()
},
// 组件内路由离开组件时
beforeRouteLeave(to, from,next){
window.document.body.style.backgroundImage='url("../assets/img/shouye.jpg")'
next()
},就可以在登录页面中删除这张背景图，不显示。
这样就可以在别的页面中使用别的背景图了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇vue-resource拦截器设置头信息的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
今天小编就为大家分享一篇让axios发送表单请求形式的键值对post数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
当我们谈论Vue的组件扩展时,经常会遇到mixin和extends这两个关键词,它们提供了一种有效的方式来共享和重用组件逻辑,本文将深入探讨Vue中mixin和extends的使用方法,并详细探讨它们的覆盖逻辑,以便你在实际项目中能够更好地应用它们2023-08-08
这篇文章主要介绍了详解Weex基于Vue2.0开发模板搭建,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了vue中使用element-ui进行表单验证的实例代码，本文给大家分享实现思路，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue3使用vue3-print-nb main.ts报错声明文件找不到的解决
在Vue3中使用vue3-print-nb时,因第三方包类型文件缺失导致全局引入报错,手动声明可解决,打印预览需清除标题、地址等样式以优化输出,理解原理灵活应对问题2025-07-07
这篇文章主要为大家介绍了Vue-cli来构建Vue项目的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue条件渲染与列表渲染，条件渲染包括v-if、v-show等内容，文章对条件渲染及列表渲染介绍详细，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了vue百度地图实现自定义弹框样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论