vue實(shí)現(xiàn)路由監(jiān)聽(tīng)和參數(shù)監(jiān)聽(tīng)
1、路由攜帶數(shù)據(jù)跳轉(zhuǎn)
routerAction(hideDisplays, data) {
switch (hideDisplays) {
case "pubAccountMenu":
this.$router.push({
name: "AppAccountInfo",
});
break;
//在菜單路由上存儲(chǔ)各種需要信息
case "publicDocInfoMenu": //菜單code: publicDocInfoMenu
data.instanceInfo.active = 4 //標(biāo)記已點(diǎn)擊的標(biāo)簽頁(yè)
data.instanceInfo.fromMenu = true
data.instanceInfo.editOrAdd = false;
this.getUcMenuInfo(data.instanceInfo) //數(shù)據(jù)、對(duì)象等
this.$router.push({
name: "DocumentInfoMaint",
params: {
instanceInfo: data.instanceInfo,
uuid: data.uuid,
breadCrumb: data.instanceInfo.name,
breadCrumbEn: En_Name,
prefix: 'text.breadCrumb.MyUseCase', //面包屑信息
prefixPath: '/MyApplications',
breadPath: '/AppInfo/' + data.uuid,
routeName:'AppInfo',
prefixRouteName:'MyApplications',
firstRoute:true
}
});
break;
}
}
2、路由監(jiān)聽(tīng)
watch: {
$route: function (to, from) {
if (this.$route.params.instanceInfo) {
// let data = JSON.parse(this.$route.params.instanceInfo);
let isObject = this.$route.params.instanceInfo; //獲取路由傳過(guò)來(lái)的數(shù)據(jù)
//判斷數(shù)據(jù)是否為對(duì)象,如果不是,則解析并獲取數(shù)據(jù)
let data = isObject instanceof Object ? this.$route.params.instanceInfo : JSON.parse(this.$route.params.instanceInfo);
this.currentProductId = data.uuid;
this.solutionUuid = data.uuid;
this.setValue(data)
localStorage.setItem('SolutionInfo', JSON.stringify(data));
} else if (localStorage.getItem("SolutionInfo")) {//在瀏覽器的本地存儲(chǔ)中獲取數(shù)據(jù)
//一般數(shù)據(jù)在瀏覽器的本地存儲(chǔ)中會(huì)以JOSN字符串的方式存儲(chǔ),所以要把數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象來(lái)使用
let data = JSON.parse(localStorage.getItem("SolutionInfo"));
this.currentProductId = data.uuid;
this.solutionUuid = data.uuid;
this.setValue(data)
}
}
}
3、值監(jiān)聽(tīng)
頁(yè)面A:
//定義要監(jiān)聽(tīng)的對(duì)象
<vm-register-table :param="param" :child-open-table="jumpOrDialog" />
例如監(jiān)聽(tīng)param:
(1).若param為對(duì)象,則需要把它轉(zhuǎn)換成JSON字符串
let tenantParam = {
tenantId:tenantId,
isTerminals: this.jumpOrDialog.isTerminals
}
this.param = JSON.stringify(tenantParam);
(2).若param為字符串,則不用做任何轉(zhuǎn)換
this.param = currentPage;
頁(yè)面B:
//1.注冊(cè)監(jiān)聽(tīng)對(duì)象
props: ['childOpenTable','param'],
//2.監(jiān)聽(tīng)
(1).
watch:{
param:function(oldValue){
console.log("newValue++"+oldValue)
let jumpOrDialog = JSON.parse(oldValue)
console.log("jumpOrDialog==++"+jumpOrDialog)
let isTerminal = jumpOrDialog.isTerminals
if(isTerminal){
this.tenantId = jumpOrDialog.tenantId;
}else{
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
this.tenantId = userInfo.tenantId;
}
let vmData = {
tenantId: this.tenantId,
pageNum: this.pageNum,
pageSize: this.pageSize
}
this.getAllVmRegister(vmData);
}
},
(2).
watch:{
param:function(oldValue){
let pages = JSON.parse(oldValue)
this.currentPage = pages;
}
}
以上這篇vue實(shí)現(xiàn)路由監(jiān)聽(tīng)和參數(shù)監(jiān)聽(tīng)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE el-tree組件左邊勾選,右邊清除交互問(wèn)題
這篇文章主要介紹了VUE el-tree組件左邊勾選,右邊清除交互問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2023-04-04
在Vue3中實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢(shì)吸引了大量開(kāi)發(fā)者,在開(kāi)發(fā)過(guò)程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細(xì)講解在Vue3中如何實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過(guò)具體示例代碼使概念更加清晰2024-07-07
解決vue 退出動(dòng)畫(huà)無(wú)效的問(wèn)題
這篇文章主要介紹了解決vue 退出動(dòng)畫(huà)無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue Cli項(xiàng)目重構(gòu)為Vite的方法步驟
本文主要介紹了Vue Cli項(xiàng)目重構(gòu)為Vite的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式
這篇文章主要介紹了elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10

