vue實現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽
更新時間:2019年10月29日 09:54:33 作者:zhusf
今天小編就為大家分享一篇vue實現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
1、路由攜帶數(shù)據(jù)跳轉(zhuǎn)
routerAction(hideDisplays, data) {
switch (hideDisplays) {
case "pubAccountMenu":
this.$router.push({
name: "AppAccountInfo",
});
break;
//在菜單路由上存儲各種需要信息
case "publicDocInfoMenu": //菜單code: publicDocInfoMenu
data.instanceInfo.active = 4 //標(biāo)記已點擊的標(biāo)簽頁
data.instanceInfo.fromMenu = true
data.instanceInfo.editOrAdd = false;
this.getUcMenuInfo(data.instanceInfo) //數(shù)據(jù)、對象等
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)聽
watch: {
$route: function (to, from) {
if (this.$route.params.instanceInfo) {
// let data = JSON.parse(this.$route.params.instanceInfo);
let isObject = this.$route.params.instanceInfo; //獲取路由傳過來的數(shù)據(jù)
//判斷數(shù)據(jù)是否為對象,如果不是,則解析并獲取數(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")) {//在瀏覽器的本地存儲中獲取數(shù)據(jù)
//一般數(shù)據(jù)在瀏覽器的本地存儲中會以JOSN字符串的方式存儲,所以要把數(shù)據(jù)轉(zhuǎn)換成JSON對象來使用
let data = JSON.parse(localStorage.getItem("SolutionInfo"));
this.currentProductId = data.uuid;
this.solutionUuid = data.uuid;
this.setValue(data)
}
}
}
3、值監(jiān)聽
頁面A:
//定義要監(jiān)聽的對象
<vm-register-table :param="param" :child-open-table="jumpOrDialog" />
例如監(jiān)聽param:
(1).若param為對象,則需要把它轉(zhuǎn)換成JSON字符串
let tenantParam = {
tenantId:tenantId,
isTerminals: this.jumpOrDialog.isTerminals
}
this.param = JSON.stringify(tenantParam);
(2).若param為字符串,則不用做任何轉(zhuǎn)換
this.param = currentPage;
頁面B:
//1.注冊監(jiān)聽對象
props: ['childOpenTable','param'],
//2.監(jiān)聽
(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實現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
el-table 表格最大高度max-height的問題解決
在工作中遇到了多個滾動條的情況,是因為el-table的max-height設(shè)置為固定值導(dǎo)致的,本文主要介紹了el-table 表格最大高度max-height的問題解決,具有一定的參考價值,感興趣的可以了解一下2024-07-07
el-table實現(xiàn)搜索高亮展示并滾動到元素位置的操作代碼
這篇文章主要介紹了el-table實現(xiàn)搜索高亮展示并滾動到元素位置,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
ElementUI實現(xiàn)el-table列寬自適應(yīng)的代碼詳解
這篇文章給大家介紹了ElementUI實現(xiàn)el-table列寬自適應(yīng)的詳細步驟,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法
本文主要介紹了vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08

