Vue route jump problem, this page jumps to this page.

< H3 > opens the first page (that is, the default page), and there is a list. Clicking on an item in the list will jump to a new page (in fact, it is not much the same as the previous page). Because the pages are all the same, I think this is "I transferred to my own page," but I found that the path has not changed for the first time. I can"t even use params query . The official website says that there is a beforeRouteUpdate that happened to take a picture of the official website, but it didn"t work.

use VUE + ElementUI

take a look at the main code

<el-table :data="tableData" >
<el-table-column show-overflow-tooltip sortable prop="orgName" label=""  min-width="400">
                  <template slot-scope="{row, $index}">
                                <span @click="partyOrg(row)">{{ row.orgName }}</span>
                            </template>
            </el-table-column>
</el-table>
//
      partyOrg(row){
        //0 A 0B
        console.log(row)
        if(row.isLeaf === 0){
          this.$router.push({
            path: "partyDues/statistics/branchDetails",
            name: "branchDetails",
            query: {
              id: row, //id
            }
          })
        }else{
            let response = {
             payDate : row.payDate,
             orgCode : row.orgCode,
             lable : row.orgName
            }
            let data = JSON.stringify(response);
            console.log(data)
            this.$router.push({
              name: "partyOrganizationDetail",
              params: {
                data: data,
              }
            })
        }
      },
      //
      { path: "/partyDues/statistics/partyOrganizationDetail/:data", component: partyOrganizationDetail, name: "partyOrganizationDetail" },
      //
 <el-table :data="tableData" >
<el-table-column show-overflow-tooltip sortable prop="orgName" label=""  min-width="400">
                  <template slot-scope="{row, $index}">
                                <span @click="partyOrg(row)">{{ row.orgName }}</span>
                            </template>
            </el-table-column>
</el-table>
    mounted:function() {
         let paramData =  this.$route.params;
         let superiorData = JSON.parse(paramData.data);
       console.log(superiorData,"");
         let dataTime = this.outstandForm.payDate = superiorData.payDate;
         let orgCode = superiorData.orgCode; 
         let data = this.routerData = {
           dataTime,
           orgCode
         }
       this.orgTree(data);//

       this.initTableList();//
    },  
    //   
             partyOrg(row){
        //0 A 0B
        console.log(row)
        if(row.isLeaf === 0){
          this.$router.push({
            path: "partyDues/statistics/branchDetails",
            name: "branchDetails",
            query: {
              id: row, //id
            }
          })
        }else{
            let response = {
             payDate : row.payDate,
             orgCode : row.orgCode,
             lable : row.orgName
            }
            let data = JSON.stringify(response);
            console.log(data)
            this.$router.push({
              name: "partyOrganizationDetail",
              params: {
                data: data,
              }
            })
        }
      },

I think some of the methods in routing should be OK, but which one? How to use it. Or you can listen to the method of requesting data, but in that case, the contents of the previous table will not be seen when the user clicks back.

there"s nothing I can do

there is no params parameter configured in your router


param parameter is also written on the routing path to return a successful

.
Menu