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指令以及dom操作详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要为大家详细介绍了vue+F2生成折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要给大家介绍了关于你不可不知的Vue.js列表渲染的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
这篇文章主要介绍了vue中为何方法要写在methods的里面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue3中keep-alive的使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
Vue中的ref和reactive是两种不同的数据响应式管理方式,通过ref创建的响应式对象在访问和修改时会自动触发重新渲染,本文给大家介绍vue中的ref/reactive区别及原理解析,感兴趣的朋友跟随小编一起看看吧2024-02-02
本文主要介绍了vue项目的创建的步骤(图文教程)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了项目nginx部署到非根目录下vue配置方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
在V8中，JavaScript的内存空间分为栈（Stack）和堆（Heap）两部分，垃圾回收的基本思路是：查找内存中的所有变量，看哪些已经不再需要，然后释放这些变量所占用的内存，本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下2023-07-07
最新评论