不同页面的 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();
}
不同页面的 body设置的更多相关文章
- [BS-10] 统一设置app所有页面的“返回”按钮样式
统一设置app所有页面的“返回”按钮样式 如果想统一设置app所有页面的“返回”按钮样式,首先自定义WZNavigationController类继承UINavigationController类,然 ...
- 使用vue-router设置每个页面的title
进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...
- Vue设置页面的title
原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...
- 今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的解决了这个问题。
今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...
- JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录
前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面 ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- html页面的head标签下
head区是指首页html代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- the site is designed b ...
- 将ECSHOP会员注册页面的Email修改成非必填项
将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29 有人说,在后台的 “会员注册项设置 ”里面 ...
- 定义页面的Dispose方法:[before]unload事件启示录
前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面上增 ...
- 转载: js jquery 获取当前页面的url,获取frameset中指定的页面的url(有修改)
转载网址:http://blog.csdn.net/bestlxm/article/details/6800077 js jquery 怎么获取当前页面的url,获取frameset中指定的页面的ur ...
随机推荐
- 批量导入数据到redis--速度极快
##批量导入数据到redis1)创建含有redis命令的文本并转换格式vim test.txt-------------------------HMSET provinceblack:14716261 ...
- ubuntu22.04安装mysql5.7
22版本的ubuntu默认安装mysql8.0版本,要想安装5.x的版本就得下载安装,这个比较详细的教程,可以参考: https://www.cnblogs.com/juanxincai/p/1648 ...
- pytorch学习笔记(9)--损失函数
1.损失函数的作用: (1)计算实际输出和目标输出之间的差距: (2)为我们更新输出提供一定的依据(也就是反向传播) 官网链接:https://pytorch.org/docs/1.8.1/nn.ht ...
- Cimage类处理图像像素(数据)的3种方式(转)
这里只讨论对图像像素的处理,cimage类的具体用法查相关资料#include <atlimage.h> //VS2010以后不用加这个 --------CImage m_Image ...
- MySQL系列-详解mysql数据类型
MySQL数据类型 (1)数值类型 1.整数型 2.浮点型 3.定点型 (2)日期时间类型 (3)字符串类型 MySQL字段属性 1.空\不为空值:NULL.NOT NULL 2.主键:primary ...
- Java-【大数处理】和【日期类】
[大数类] BigInteger(整数) 和 BigDecimal(小数) 都是Java针对大数提供的类 常用方法: (1)加:add (2)减:subtract (3)乘:multiply (4)除 ...
- JavaWeb-动力节点
目录 项目名 src |---- Servlet webapproot |------WEB-INF |------classes(存放字节码) |------lib(第三方jar包) |------ ...
- OPENGL入门的小知识点
记录一下看到的知识点. 大部分知识点来自于https://learnopengl-cn.github.io/ 1.什么是OpenGL 一般它被认为是一个API,包含了一系列可以操作图形.图像的函数.然 ...
- Linux ~ jenkins 直接安装
前置条件: 1. Jenkins是由java编写的,所以最好安装java8以上的环境 开始安装: 1. 配置yum源,将jenkins导入yum源 sudo wget -O /etc/yum.repo ...
- php success error 封装跳转
/** * Warning提示信息 * @param string $type 提示类型 默认支持success, error, info * @param string $msg 提示信息 * @p ...