不同页面的 body设置

由于SPA页面的特性，传统的设置 body 背景色的方法并不通用。

解决方案：利用组件内的路由实现

第一种方式

// 实例创建之前
beforeCreate(){
document.querySelector('body').setAttribute('style','background: #FFFFFF');
},
//页面销毁之前执行
beforeDestroy(){
document.querySelector('body').removeAttribute('style');
}

8
第二种方式

    //组件内路由--进入组件时
	beforeRouteEnter(to,from,next){
		//此时不能获取组件实例 this
		//因为的当前守卫执行前，组件实例还没被创建
		window.document.body.style.background="#FFFFFF";
		next();
	},
	//组件内路由--离开组件时
	beforeRouteLeave(to,from,next){
		//此时获取组件实例 this
		window.document.body.style.background="#f2f2f2";
		next();
	}

第三种方式

router 下面

// 人员考勤
{
path: '/personnel-attendance',
name: 'personnel-attendance',
meta: {
title: '人员考勤',
hideRight: true,
showTitle: true,

  keepAlive: false
},
component: () => import('../../../views/jlsk/personnel-attendance/index.vue'),
beforeEnter: (to, from, next) => {
  window.document.body.style.background = '#f5f5f5'
  next()
},
beforeLeave: (to, from, next) => {
  // 此时获取组件实例 this
  window.document.body.style.background = '#ffffff'
  next()
}

},

blob