vue打開其他項目頁面并傳入數(shù)據(jù)詳解
更新時間：2020年11月25日 09:12:54 作者：夜雨風亭
這篇文章主要給大家介紹了關于vue打開其他項目頁面并傳入數(shù)據(jù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1.不跨域，攜帶sessionstorage打開
主頁面，存儲sessionstorage后，打開頁面
let data = {
text:'我是數(shù)據(jù)'
};
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 + "http://" + window.location.host + reportUrl, isMobile?'_self':'_blank');
子頁面
var date = JSON.parse(sessionStorage.getItem('information'));
2.跨域，iframe通信
跨域的情況下，無法攜帶sessionstorage，通過iframe的postMessage通信機制傳遞數(shù)據(jù)；
不跨域也可以用，但更建議使用第一種，比較絲滑~
主頁面，寫入url，加載完成后，發(fā)送數(shù)據(jù)
<iframe id='iframe' class="iframe" v-if="src" ref="iframe" :src="src"></iframe>
let data = {
text:'我是數(shù)據(jù)'
};
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;
}
})
子頁面，執(zhí)行監(jiān)聽，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);
}
總結(jié)
到此這篇關于vue打開其他項目頁面并傳入數(shù)據(jù)的文章就介紹到這了,更多相關vue打開項目頁面并傳數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue 封裝防刷新考試倒計時組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
vue2+el-menu實現(xiàn)路由跳轉(zhuǎn)及當前項的設置方法實例
這篇文章主要介紹了vue2+el-menu實現(xiàn)路由跳轉(zhuǎn)及當前項的設置,方法實例代碼詳解，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-11-11
petite-vue 是為漸進增強而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標準 Vue 相同的模板語法和反應性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下2024-07-07
在我工作過程中使用el-dialog的需求挺多的,也積累了一下使用技巧,這篇文章主要給大家介紹了關于VUE學習寶典之el-dialog使用的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
在Vue.js中,頁面跳轉(zhuǎn)是構(gòu)建單頁面應用（SPA）的基本操作之一,本文將介紹Vue中實現(xiàn)頁面跳轉(zhuǎn)的幾種方法,并通過實例代碼幫助理解每種方法的用法,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了詳解如何使用vue-cli腳手架搭建Vue.js項目 ,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue項目中使用token的身份驗證的簡單實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vue3實現(xiàn)轉(zhuǎn)盤抽獎效果的示例詳解
這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的轉(zhuǎn)盤抽獎效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下2023-10-10
vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼
本文通過實例代碼給大家介紹了vue.js通過路由實現(xiàn)經(jīng)典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
本文通過實例代碼給大家分享了vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-11-11