vue如何向其他项目页面传信息?

  这篇文章要实现的需求是打开其他项目并传数据的的内容,那么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如何向其他项目页面传信息?

dawei

【声明】:达州站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。