由于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. Finance财务软件(月度结转专题)

    支持按模板结转 默认结转模板 1.结转收入 借: 6001 主营业务收入 6051 其他业务收入 6301 营业外收入 贷: 4103 本年利润 2.结转成本.费用和税金 借: 4103 本年利润 贷 ...

  2. 【剑指Offer】【树】树的子结构

    题目:输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) /* struct TreeNode { int val; struct TreeNode *left ...

  3. CompletableFuture的使用

    1 List<List<String>> subList = CommonUtils.splitList(pendingIds, 500);private static fin ...

  4. MySQL 常用命令(3)------表基本操作

    五.表的基本操作 1.创建表 语法:create table <表名> ( <字段名1> <类型1> [,..<字段名n> <类型n>]); ...

  5. Cascader 级联选择器 数据不回显

    这次的问题原因主要是因为  数据存在于两张表  并且索引的字段不同   一个为id(int)一个为字符(string) 在做修改操作数据回显的时候会导致  后端返回的数组中一个为字符一个为bumber ...

  6. from pathlib import Path

    from pathlib import Path #引入库 P.parent #获取父级目录 P.exists() #判断当前路径是否存在 P.mkdir(parents=Fasle) # 根据路径创 ...

  7. 【2020NIO.AC省选模拟#10】C. 寄蒜几盒

    题目链接 原题解: 可以发现,假设我们把凸多边形看做障碍,一个点没有被染色当且仅当在它的位置上能看到凸多边形任意两条相对的边中的一条(也就是能看到至少$\dfrac{n}{2}$条边). 对于每个询问 ...

  8. Excel Vlookup用法和常见报错#REF! #Value!

    VLOOKUP(E2,$A$2:$C$5,2,FALSE) E2 为选中查找的条件 $A$2:$C$5 1为需要查找的区域,这个区域一般是固定的,所以要加上$符号 2这个区域可以在前面加上SHEET2 ...

  9. pandas的数据结构--Series创建使用

    # 1. 使用Series创建一个空的系列:import pandas as pds=pd.Series()print(s)输出结果为:Series([], dtype: float64) # 2. ...

  10. Mysql学习:1、mysql安装及配置及连接Navicat

    1.下载地址: https://dev.mysql.com/downloads/windows/installer/8.0.html 2.安装流程: a.选自定义安装:custom. b. 在下一步的 ...