vue实现路由监听和参数监听
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) {
// let data = JSON.parse(this.$route.params.instanceInfo);
let isObject = this.$route.params.instanceInfo; //获取路由传过来的数据
//判断数据是否为对象,如果不是,则解析并获取数据
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")) {//在浏览器的本地存储中获取数据
//一般数据在浏览器的本地存储中会以JOSN字符串的方式存储,所以要把数据转换成JSON对象来使用
let data = JSON.parse(localStorage.getItem("SolutionInfo"));
this.currentProductId = data.uuid;
this.solutionUuid = data.uuid;
this.setValue(data)
}
}
}
3、值监听
页面A:
//定义要监听的对象
<vm-register-table :param="param" :child-open-table="jumpOrDialog" />
例如监听param:
(1).若param为对象,则需要把它转换成JSON字符串
let tenantParam = {
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)
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实现路由监听和参数监听就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
以上是 vue实现路由监听和参数监听 的全部内容, 来源链接: utcz.com/z/357717.html