不同页面设置body背景颜色

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

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

第一种方式

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

第二种方式

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

你可能感兴趣的:(不同页面设置body背景颜色)