vue打开其他项目页面并传入数据详解


Posted in Vue.js onNovember 25, 2020

1.不跨域,携带sessionstorage打开

主页面,存储sessionstorage后,打开页面

let data = {
	text:'我是数据'
};
let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)?true:false;

sessionStorage.setItem('information',JSON.stringify(data));
//ios不能打开新窗口,所以改为移动端在原本页面打开,pc打开新窗口
window.open(window.location.protocol + "//" + window.location.host + reportUrl, isMobile?'_self':'_blank');

子页面

var date = JSON.parse(sessionStorage.getItem('information'));

2.跨域,iframe通信

跨域的情况下,无法携带sessionstorage,通过iframe的postMessage通信机制传递数据;

不跨域也可以用,但更建议使用第一种,比较丝滑~

主页面,写入url,加载完成后,发送数据

<iframe id='iframe' class="iframe" v-if="src" ref="iframe" :src="src"></iframe>

let data = {
	text:'我是数据'
};
this.src = url
this.$nextTick(()=>{
	document.getElementById('iframe').onload=()=>{
		document.getElementById('iframe').contentWindow.postMessage({
			type:'preview',
			data:data
		},this.src)
		document.getElementById('iframe').onload=null;
 }
})

子页面,执行监听,created、mounted都可以

created() {
	window.addEventListener('message',(event)=>{
	 console.log(event.data.type)
	 if(event.data&&event.data.type=='preview'){
	  console.log(event.data.data)
	  let data = event.data.data
	 }
	 }, false);
}

总结

到此这篇关于vue打开其他项目页面并传入数据的文章就介绍到这了,更多相关vue打开项目页面并传数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Vue 的 v-model用法实例
Nov 23 #Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
You might like
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
jQuery 选择器理解
2010/03/16 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python numpy 常用函数总结
2017/12/07 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python的命名规则知识点总结
2019/10/04 Python
python内置模块collections知识点总结
2019/12/19 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
采购内勤岗位职责
2013/12/10 职场文书
珠宝店促销方案
2014/03/21 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Python Pandas 删除列操作
2022/03/16 Python