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 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue实现列表垂直无缝滚动
Apr 08 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
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JS input 数字验证代码
2009/07/30 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
python 装饰器重要在哪
2021/02/14 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
交通安全演讲稿
2014/01/07 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
首都博物馆观后感
2015/06/05 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技