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

 更新时间:2020年11月25日 09:12:54   作者:夜雨风亭  
这篇文章主要给大家介绍了关于vue打开其他项目页面并传入数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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 封装防刷新考试倒计时组件的实现

    Vue 封装防刷新考试倒计时组件的实现

    这篇文章主要介绍了Vue 封装防刷新考试倒计时组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue2+el-menu实现路由跳转及当前项的设置方法实例

    vue2+el-menu实现路由跳转及当前项的设置方法实例

    这篇文章主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • petite vue 基本使用指南示例小结

    petite vue 基本使用指南示例小结

    petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下
    2024-07-07
  • VUE学习宝典之el-dialog使用示例

    VUE学习宝典之el-dialog使用示例

    在我工作过程中使用el-dialog的需求挺多的,也积累了一下使用技巧,这篇文章主要给大家介绍了关于VUE学习宝典之el-dialog使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue跳转页面的几种常用方法总结

    Vue跳转页面的几种常用方法总结

    在Vue.js中,页面跳转是构建单页面应用(SPA)的基本操作之一,本文将介绍Vue中实现页面跳转的几种方法,并通过实例代码帮助理解每种方法的用法,需要的朋友可以参考下
    2024-09-09
  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    这篇文章主要介绍了详解如何使用vue-cli脚手架搭建Vue.js项目 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解vue项目中使用token的身份验证的简单实践

    详解vue项目中使用token的身份验证的简单实践

    这篇文章主要介绍了vue项目中使用token的身份验证的简单实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue3实现转盘抽奖效果的示例详解

    Vue3实现转盘抽奖效果的示例详解

    这篇文章主要为大家详细介绍了如何通过Vue3实现简单的转盘抽奖效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2023-10-10
  • vue.js通过路由实现经典的三栏布局实例代码

    vue.js通过路由实现经典的三栏布局实例代码

    本文通过实例代码给大家介绍了vue.js通过路由实现经典的三栏布局,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • vue动态循环出的多个select出现过的变为disabled(实例代码)

    vue动态循环出的多个select出现过的变为disabled(实例代码)

    本文通过实例代码给大家分享了vue动态循环出的多个select出现过的变为disabled效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-11-11

最新评论