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