vue實(shí)現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽
更新時(shí)間:2019年10月29日 09:54:33 作者:zhusf
今天小編就為大家分享一篇vue實(shí)現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
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)簽頁 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)聽
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ù)是否為對(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ì)象來使用 let data = JSON.parse(localStorage.getItem("SolutionInfo")); this.currentProductId = data.uuid; this.solutionUuid = data.uuid; this.setValue(data) } } }
3、值監(jiān)聽
頁面A: //定義要監(jiān)聽的對(duì)象 <vm-register-table :param="param" :child-open-table="jumpOrDialog" /> 例如監(jiān)聽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; 頁面B: //1.注冊(cè)監(jiān)聽對(duì)象 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實(shí)現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3中實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢(shì)吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細(xì)講解在Vue3中如何實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07Vue Cli項(xiàng)目重構(gòu)為Vite的方法步驟
本文主要介紹了Vue Cli項(xiàng)目重構(gòu)為Vite的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式
這篇文章主要介紹了elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10