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()
  },

 就可以在登录页面中删除这张背景图，不显示。

 这样就可以在别的页面中使用别的背景图了。