VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图

VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图

VUE属于单页面应用，如果直接采用CSS设置Body的背景图，会让造成所有的VUE页面都会被设置同一个背景图，因此需要采用另外的方式来设置单个页面的背景图，本文采用js动态设置单个VUE页面的背景图，整个效果如下图：

1、主要思路

主要是利用VUE3.0的生命周期钩子函数mounted()和beforeUnmount()。mounted()是在实例被挂载后调用，beforeUnmount()是在在卸载组件实例之前调用。

1、进入VUE页面，执行mounted(),设置body背景图片
2、离开VUE页面，执行beforeUnmount()，清除背景图片

注意： VUE3.0中卸载组件实例之前调用的函数是beforeUnmount()，而在VUE2.0中则是beforeDestroy()

2、主要代码实现

<template>
  <div></div>
</template>

<script>
export default {
  name: 'Back',
  data () {
    return {
      loginBg: 'url(' + require('../assets/login.jpeg') + ')'
    }
  },
  // 进入VUE时首先调用的钩子函数
  mounted () {
    // 添加背景图片
    document.body.style.backgroundSize = '100%'
    document.body.style.backgroundImage = this.loginBg
  },
  // 离开VUE时调用的钩子函数
  beforeUnmount () {
    // 清除背景图片
    document.body.style.backgroundImage = ''
  }
}
</script>

<style>
</style>