vue路由监听和参数监听

绝地灬酷狼 2022-01-07 14:11 472阅读 0赞

**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;
             }
         }

转载于:https://www.cnblogs.com/zhusf/p/10558768.html