鍍金池/ 問答/HTML5  HTML/ vue路由跳轉(zhuǎn)問題,本頁面跳轉(zhuǎn)本頁面。

vue路由跳轉(zhuǎn)問題,本頁面跳轉(zhuǎn)本頁面。

打開第一個(gè)頁面(也就是默認(rèn)的頁面),有一個(gè)列表,點(diǎn)擊列表的某一項(xiàng)會(huì)跳轉(zhuǎn)一個(gè)全新的頁面(其實(shí)和上一個(gè)頁面是相差不大)這時(shí)候也是一個(gè)列表點(diǎn)擊某一項(xiàng)會(huì)跳轉(zhuǎn)到別的頁面,因?yàn)轫撁娑家粯游蚁脒@是“自己調(diào)到自己的頁面”但是發(fā)現(xiàn)路徑?jīng)]有變化還是我第一次的路徑,我用params query都不行,官網(wǎng)說有一個(gè)beforeRouteUpdate照個(gè)官網(wǎng)的巧了一遍,還是沒用。

采用VUE + ElementUI

可看下主要的代碼

<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 非0跳B
        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' },
      //下面的是我跳轉(zhuǎn)之后的頁面
 <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);//其他請求數(shù)據(jù)的方法

       this.initTableList();//列表請求的方法
    },  
    //這里就需要本頁面跳轉(zhuǎn)本頁面 結(jié)構(gòu)都相同 所以就寫了和上一個(gè)頁面一樣的方法 但是行不通
             partyOrg(row){
        //0 跳A 非0跳B
        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,
              }
            })
        }
      },

我覺得用路由里面的一些方法應(yīng)該可以,但是用哪一個(gè)?怎么用?;蛘呖梢员O(jiān)聽請求數(shù)據(jù)的方法但是那個(gè)樣的話用戶點(diǎn)返回就看不到上一個(gè)表格的內(nèi)容了。

我已經(jīng)無計(jì)可施了
回答
編輯回答
尛曖昧

圖片描述

param 參數(shù)也寫在路由路徑上才能返回成功的

2017年7月2日 09:07
編輯回答
墨染殤

你的router 里配置 params 參數(shù)沒有

2017年5月21日 05:12