开发一个新系统,前端用的vue,vue是单体应用,所有页面都在一个窗口里实现,但项目要求在点button链接后要新打开一个浏览器页面,解决方法如下:
1. 给此button设置新事件 @click="createdefect"
<el-button v-no-more-click type="primary" icon="el-icon-circle-plus-outline" @click="createdefect">提交缺陷</el-button>
2.在页面上新增一个默认 a组件
<a ref='target' class="link" target="_blank"></a>
3. 写js事件
createdefect(){ let target = this.$refs.target target.setAttribute('href', window.location.origin + '/#/createDefect') target.click() },
或者可以这样:
createdefect(){ let routeName = "createDefect"; let routeData = 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中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
以下为windows 系统操作,仅供参考。 一、修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为...二、vue启动自动打开页面 vue 脚手架搭建项目后启动npm run dev,会出现 Your application is running here: http://
本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 <span class=spanfour>link跳转 // 添加参数 // 参数获取 id = this.$...
可做图片预览跟淘宝图片预览功能一样,新窗口全屏图片展示功能
vue扩展,. 使用 vue-devtools 调试 vue 页面 在浏览器中访问一个使用了 vue 的页面,打开浏览器的开发者工具,切换到 Vue 面板,即可使用 vue-devtools 调试当前的页面。
vue-cli3多页面配置demo vue-cli3多页面配置demo vue-cli3多页面配置demo
想要让导航栏、侧边栏变为公共页面,则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下: <!-- 其他页 --> <!-- 导航栏 --> <header></header...
vue终极解决多个页面Echart随页面窗口大小而改变图形大小
vue根据数据动态展示页面,动态组件,动态表格,动态弹窗等,仅供静态数据进行页面展示。vue根据数据动态展示页面,动态组件,动态表格,动态弹窗等,仅供静态数据进行页面展示。vue根据数据动态展示页面,动态组件...
今天小编就为大家分享一篇vue单页面应用打开新窗口显示跳转页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
vue单页面实现pc移动端页面不同 博文:https://blog.csdn.net/qq_40488121/article/details/106218473
主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
在本篇内容里小编给大家整理了关于vue写h5页面的方法以及注意点分析,有需要的朋友们跟着学习下吧。
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
官方文档中说 v-link 指令被 <router> 组件指令替代,且 <router> 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 <router> 是支持 target=”_blank” 属性的(tag=”a”)...
记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1、<vue>标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代,且 <router> 不支持 target=_...
开发中有时候一个页面在一个.vue文件中写会造成页面冗余,代码难以维护,这时候就需要考虑将页面不同的子页面(如:弹窗等分离到不同的文件中)。 示例:transpond.vue为子页面,logisticsGroup.vue为父页面。 注...
本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现,分享给大家,具体如下: 效果如下图 正常 js 页面处理方式 [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if ...
实现禁止鼠标拖动图片在新窗口打开 .