由于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. 1144. 递减元素使数组呈锯齿状 (Medium)

    问题描述 1144. 递减元素使数组呈锯齿状 (Medium) 给你一个整数数组 nums,每次 操作 会从中选择一个元素并 将该元素的值减少 1. 如果符合下列情况之一,则数组 A 就是 锯齿数组: ...

  2. .NET Core 3.0 WebApi 使用Swagger

    1.安装指定版本: Swashbuckle.AspNetCore 5.0.0-rc4(目前稳定版本4.0.1在AspNetCore3.0中会报错误) 2.后台C#代码要严格格式必须加[HttpPost ...

  3. vue的双向绑定规则

    vue提供了v-model双向绑定指令,用来辅助在不操作DOM的前提下,快速读取表单的数据 <!DOCTYPE html> <html lang="en"> ...

  4. Python3之并发(七)---线程同步队列(queue)

    queue模块实现了多生产者,多消费者队列 queue模块的常用类和异常 queue.Queue(maxsize=0) 先进先出(FIFO)的队列, maxsize: 队列的大小(即队列的元素个数), ...

  5. java-正确打日志

    使用 slf4j 使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一. 实现方式统一使用: Logback 框架 打日志的正确方式 什么时候应该打日志 当你遇到问题的时候,只能通过 debu ...

  6. (jmeter笔记)添加正则提取器和JSON提取器

    添加正则提取器和JSON提取器 1.正则提取器: 返回的Token如下: 引用名称:可以理解为变量名 //调用表示${变量名} 正则表达式:"Token":"(.+?)& ...

  7. Linux基础第八章:操作系统引导过程、运行级别及开机问题处理

    一.操作系统引导过程 1.开机自检(bios) 2.MBR引导 3.grub菜单 4.加载内核(kernel) 5.init进程初始化 二.操作系统运行级别(init0-init6) 1.init 0 ...

  8. Spring boot jar包解压后重新压缩命令

    进入解压的目录/demo,运行 jar cvfM0 demo.jar * 压缩后的项目即可运行 参考:https://www.cnblogs.com/liyanbin/p/6088458.html

  9. Mac 卸载 Anaconda3

    终端安装anaconda-clean conda install anaconda-clean 删除所有与 Anaconda 有关的文件与目录 anaconda-clean --yes 第 2 步中的 ...

  10. textarea兼容问题

    一.IOS 中不允许输入 <textarea contenteditable="true"></textarea> textarea { -webkit-u ...