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