vue是用a标签打开新页面_vue 在新窗口打开页面并设置不同的背景
开发一个新系统,前端用的vue,vue是单体应用,所有页面都在一个窗口里实现,但项目要求在点button链接后要新打开一个浏览器页面,解决方法如下:
1. 给此button设置新事件 @click="createdefect"
提交缺陷
2.在页面上新增一个默认 a组件
3. 写js事件
createdefect(){
let target = this.$refs.target
target.setAttribute('href', window.location.origin + '/#/createDefect')
target.click()
},
或者可以这样:
createdefect(){
letrouteName= "createDefect";
letrouteData= this.$router.resolve({
name: routeName,
});
window.open(routeData.href, "_blank");
},
然后新开的页面还用的app.vue中的全局背景,需要更改。之前想着用改变最上层body的css覆盖来解决问题,结果没走通,查资料发现要从生命周期, js的逻辑来解决。要通过一个组件“初始化”,“销毁"来控制body的颜色。下面是具体代码。
1. 在新页面的js中增加如下代码:
beforeCreate: function() {
document.getElementsByTagName("body")[0].className="body_back";
},
beforeDestroy: function() {
document.body.removeAttribute("class","body_back");
}
2. 在新页面对应的css中设置如下:
.body_back{
background:linear-gradient(to right,#fff,#f5f6f9)
}
vue是用a标签打开新页面_vue 在新窗口打开页面并设置不同的背景相关推荐
- html当前窗口打开页面,JavaScript 在本窗口打开网页
JavaScript 在本窗口打开网页 相关文档: 很多人都向在服务器 端调用客户端的函数来操作,也就是在asp中调用java script脚本中已经定义好的脚本函数.经过研究,发现了一些勉强的方法. ...
- vue 修改项目启动后的页面_vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
- vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) ...
- 在HTML中,如何设置新窗口打开和在原窗口打开
在你连接的地方代码加上target="_blank" 新窗口打开target="_parent" 同一窗口打开 或者不要加target="_paren ...
- phpstorm一个窗口打开多个项目
phpstorm默认一个窗口只显示一个项目,入股拟新建一个项目,他会给你个选项卡,问你是在新窗口打开新项目还是在本窗口打开. 能不能在一个窗口打开多个项目呢?就像sublime text那样,其实是可 ...
- vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面
vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决 一.使用标签 需要注意的是,router-link并不支持 targe ...
- vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法
vue-router跳转时打开新页面的两种方法 最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.标签实现新窗口打开 ...
- php中asp标签怎么打开新页面,A标签新窗口打开怎么设置
超链接a标签新窗口打开怎么设置怎么完成-a锚文本掀开法子设置 a标签是配置超链接锚文本标签,a超链接标签让站点A网页打开B网页,或让Aweb转到Bweb.那末a标签超链接翻开方法中新窗口翻开网页如何配 ...
- html a标签打开新页面,A标签新窗口打开怎么设置
超链�?strong>a标签新窗口打开怎么设置怎么实现-a锚文本打开方式设置 首先看看a标签最简单最基本结构代码�?/p>CSS5�?lt;/a> 这样�?ldquo;CSS5�?r ...
最新文章
- C#基础-类成员(Day7)
- Debian 系统初体验
- mysql ibatis 分页_MyBatis怎样实现MySQL动态分页?
- puppet自动化运维之exec资源
- Python学习笔记:Io编程序列化
- C++手写a除以b的正余数
- LeetCode 161. 相隔为 1 的编辑距离(DP/遍历)
- fcpx教程从入门到精通「3」预览窗口的认识
- NAT with same subnetwork
- 如何激发孩子的想象力_如何培养孩子想象力
- java实现一个月的日历打印,Java实现按年月打印日历功能【基于Calendar】,日历calendar...
- 粪斗吧 ! 骚年 !
- 【mxGraph】源码学习:(6)mxGraphModel
- Oracle EBS AP付款(退款)无法产生损失(LOSS)会计分录
- 1T空间只是噱头而已! 网盘容量大战背后的技术秘密
- Linux下Tab键补全,报No space left on device错误
- 谷歌浏览器不能正常显示
- backtracking及其应用
- Node.js 安装教程(Windows)
- UE4 Geometry Polygon
热门文章
- GOPS现场 | 大规模团队如何实现Jenkins的集中管理——对话龙智技术顾问
- 同一台机器不同的sata线居然传输率不同
- Coldfusion 2016出现The error occurred in scheduletasks.cfm: line 188
- 一文详解VarScan肿瘤体细胞突变检测的的安装和实践
- 遇见未来-北京AR/MR线下技术交流邀请您(已过期)
- hugo(雨果)搭建提示错误类型
- To C企业的To B征程:攀登企业协作的云梯
- iOS开发 - 怎么让支持iPad/iPhone的app取消支持iPad或者iPhone中的一项
- 案例剖析:你团队的迭代周期该如何设定?
- 微信小程序安卓机型调用微信支付后取消付款会重新调用一次页面的onShow方法