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中使用-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 body的背景图片属性设置】这样就可以在别的页面中使用别的背景图了。