vue实现路由监听和参数监听

2023-08-10 05:25:04 96

1、路由携带数据跳转

routerAction(hideDisplays,data){
switch(hideDisplays){
case"pubAccountMenu":
this.$router.push({
name:"AppAccountInfo",
});
break;
//在菜单路由上存储各种需要信息
case"publicDocInfoMenu"://菜单code:publicDocInfoMenu
data.instanceInfo.active=4//标记已点击的标签页
data.instanceInfo.fromMenu=true
data.instanceInfo.editOrAdd=false;
this.getUcMenuInfo(data.instanceInfo)//数据、对象等
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、路由监听

watch:{
$route:function(to,from){

if(this.$route.params.instanceInfo){
//letdata=JSON.parse(this.$route.params.instanceInfo);
letisObject=this.$route.params.instanceInfo;//获取路由传过来的数据
//判断数据是否为对象，如果不是，则解析并获取数据
letdata=isObjectinstanceofObject?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));
}elseif(localStorage.getItem("SolutionInfo")){//在浏览器的本地存储中获取数据
//一般数据在浏览器的本地存储中会以JOSN字符串的方式存储，所以要把数据转换成JSON对象来使用
letdata=JSON.parse(localStorage.getItem("SolutionInfo"));
this.currentProductId=data.uuid;
this.solutionUuid=data.uuid;
this.setValue(data)
}

}
}

3、值监听

页面A：
//定义要监听的对象


例如监听param：
(1).若param为对象，则需要把它转换成JSON字符串
lettenantParam={
tenantId:tenantId,
isTerminals:this.jumpOrDialog.isTerminals
}
this.param=JSON.stringify(tenantParam);
(2).若param为字符串，则不用做任何转换
this.param=currentPage;

页面B：
//1.注册监听对象
props:['childOpenTable','param'],

//2.监听
(1).
watch:{
param:function(oldValue){
console.log("newValue++"+oldValue)
letjumpOrDialog=JSON.parse(oldValue)
console.log("jumpOrDialog==++"+jumpOrDialog)
letisTerminal=jumpOrDialog.isTerminals
if(isTerminal){
this.tenantId=jumpOrDialog.tenantId;
}else{
letuserInfo=JSON.parse(localStorage.getItem("userInfo"))
this.tenantId=userInfo.tenantId;
}
letvmData={
tenantId:this.tenantId,
pageNum:this.pageNum,
pageSize:this.pageSize
}
this.getAllVmRegister(vmData);
}
},
(2).
watch:{
param:function(oldValue){
letpages=JSON.parse(oldValue)
this.currentPage=pages;
}
}

以上这篇vue实现路由监听和参数监听就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue实现路由监听和参数监听

热门推荐

随机推荐