不同页面的 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 ...
随机推荐
- JavaScript 错误 throw、try、catch
JavaScript错误throw.try.catch try:语句测试代码的错误: catch:语句处理错误: throw:语句创建自定义错误: finally:语句在try和catch语句之后,无 ...
- Linux出现Read-only file system错误解决方法
执行命令时遇到如下错误 这个问题是文件系统受损导致得,fstab文件未正确配置 解决方法: df -hT #查看一下分区及挂载信息 fsck -a /dev/sda3 -a :检查文件系统,有异常便自 ...
- WC2023 游记
不是很会写游记,随便写写吧. 一些附件 讲课资料合集(压缩后 \(\rm 31MB\))太大了,可以去 U 群下载. 由于后面很多乐子,我把相关内容打包成 zip 上传上来了. 乐子合集下载链接.(这 ...
- vue provide inject 方法
上级组件: provide() { return { changeSelectOptions: this.changeSelectOptions, switchTabs: () => this. ...
- CF513F2 题解
题意 传送门 有 \(a+b+1\) 个会动的棋子,在一个大小为 \(n\times m\) 的棋盘上,棋盘上有一些点有障碍.棋子中,有 \(a\) 个红色棋子,\(b\) 个蓝色棋子,和 \(1\) ...
- Java数组之Arrays类讲解
Arrays类 数组的工具类java.util.Arrays 由于数组对象本身并没有什么方法可以供我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作. 查 ...
- mongoengine模型字段非严格校验FieldDoesNotExist
背景 最近需要从mongoDB中查询数据用于数据分析,一开始就用了pymongo后来发现使用起来很不方便,后面了解到有类似SQLAlchemy的ORM模块mongoengine能够操mongo 简单看 ...
- C++ 读取文本, 读取( 单字符/ 一行/ 全部 )
C++ 读取文本 介绍三种读取方式: 逐字符读取(注意不是字节) 读取一行 读取全部 示例代码: #include <iostream> #include <string> # ...
- calibredrv命令
flattencell: set L1 [layout create *.gds -dt_expand] $L1 flatten cell TOP_CELL_NAME $L1 gdsout ./*_f ...
- docker登录mysql
一.查看mysql是否已启动 二.登录mysql 三.假如需要重启mysql 查看docker中运行的容器docker ps,再重新启动mysql,docker restart 9299415df7f ...