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、主要代码实现

<templat