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

回到顶部