vue body的背景图片属性设置方式
作者：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()
},就可以在登录页面中删除这张背景图，不显示。
这样就可以在别的页面中使用别的背景图了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。