由于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();
}

blob

不同页面的 body设置的更多相关文章

  1. [BS-10] 统一设置app所有页面的“返回”按钮样式

    统一设置app所有页面的“返回”按钮样式 如果想统一设置app所有页面的“返回”按钮样式,首先自定义WZNavigationController类继承UINavigationController类,然 ...

  2. 使用vue-router设置每个页面的title

    进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...

  3. Vue设置页面的title

    原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...

  4. 今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的解决了这个问题。

    今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...

  5. JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

    前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限.  即使在页面 ...

  6. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  7. html页面的head标签下

    head区是指首页html代码的<head>和</head>之间的内容.  必须加入的标签  1.公司版权注释  <!--- the site is designed b ...

  8. 将ECSHOP会员注册页面的Email修改成非必填项

    将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29   有人说,在后台的 “会员注册项设置 ”里面 ...

  9. 定义页面的Dispose方法:[before]unload事件启示录

    前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面上增 ...

  10. 转载: js jquery 获取当前页面的url,获取frameset中指定的页面的url(有修改)

    转载网址:http://blog.csdn.net/bestlxm/article/details/6800077 js jquery 怎么获取当前页面的url,获取frameset中指定的页面的ur ...

随机推荐

  1. 简述Linux零拷贝原理

    什么是零拷贝 零拷贝描述的是在计算机操作系统中,CPU不执行将数据从一个内存区域,拷贝到另一个内存区域的任务. 通过网络传输文件时,零拷贝通常可以节省CPU周期和内存带宽. 零拷贝的好处 节省了CPU ...

  2. HTML+CSS+JS制作一个灰白色简约时钟

    HTML+CSS+JS制作一个灰白色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...

  3. docker持久化数据存储

    一.把数据存储到本地/opt/data目录下面,容器挂载到/data目录下面 [root@docker-1 ~]# docker run -itd --name www -v /opt/data:/d ...

  4. uni-app 下载文件 预览 + 保存自定义目录

    作为使用uni-app的小白来说  尝试了好几种方法 终于得到了我想要的效果(如下) 1.点击下载按钮(文件 或者图片)  2.预览 :用户自定义选择查看的软件(图片在手机相册 文件用其他打开预览) ...

  5. fiddler抓包返回304

    为了验证部分场景需要对接口返回数据进行修改后验证前端代码逻辑处理,发现同一域名下其他接口都正常返回,但是某个端口返回304. 操作步骤是页面打开后接口已经请求了,这时候才打开fiddler抓取请求拦截 ...

  6. Unity 使用JIMO 做MR扫图(Vuforia) 优化

    最近在做一个用MR眼镜端扫描图片做定位用, 使用的Vuforia提供的图片识别功能. 在眼镜端因为摄像机很挫,导致扫描出来的图片 位置存在着一定的偏差.就做了个小优化. 1.扫图的角度设定,垂直于图片 ...

  7. jmeter非GUI模式运行-分布式测试

    上一篇文章我们说到了jmeter命令行运行但是是单节点下的, jmeter底层用java开发,耗内存.cpu,如果项目要求大并发去压测服务端的话,jmeter单节点难以完成大并发的请求,这时就需要对j ...

  8. python写入sqlserver中文乱码问题

    需求是python3开发,数据库是sqlserver,第一次用python操作sqlserver,写入数据时,中文全部变成了?? 试了pyodbc,但缺少sqlserver驱动 试了sqlStr.en ...

  9. Delphi实现Windows的气泡提示样式

    其实也不复杂,主要使用到shellAPI下的TNotifyIconData这个结构体: typedef struct _NOTIFYICONDATA { DWORD cbSize; //结构体的大小, ...

  10. win7下MongoDB安装配置

    之前看windows下安装MongoDB操作很是简单,今天在自己笔记本上安装一次,各种小问题.参照网上各大神帖子,再记录下个简单流程以便以后记得. 1.MongoDB官网上下载安装包 2.运行安装包, ...