vue中通組件傳值 - 使用 $route.push傳參

最近在做項目的時候遇到通組件傳參,我發現如果是兩個頁面之間是使用路由跳轉的時候其實完全可以直接用路由傳參的時候把數據帶到指定頁面,方法如下:

register頁面 跳轉到 bmtDetail頁面

$route的傳參      this.$router.push({name:'查看主題',params:{themerow:row}})

注意:name 和param一起用

<template>
     <el-row>
         <el-table :data="tableData" border style="width: 100%" @row-click="handleCurrentChange">
             <template>
                <el-table-column fixed prop="applyUserTel" label="電話"></el-table-column>
                <el-table-column label="備註"></el-table-column>
                <el-table-column  label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="medium" @click="seeDetail(scope.row,scope.$index)">查看</el-button>
                  </template>
                </el-table-column>
              </template>
          </el-table>
     </el-row>
</template>
<script>
  export default {
    methods:{
      /*查看主題詳情 傳id*/
      seeDetail(row,index){
        this.$router.push({name:'查看主題',params:{themerow:row}})
      }
    },
   
  }
</script>

Detail頁面

{{$route.params.themerow.applyUserNm}}使用這個語句就可以調用參數

<template>
  <div class="from_zhu">
    <el-form v-if="seen" label-width="80px" size="medium"
             class="formWrap">
      <el-form-item label="主題名稱">
        <span>{{$route.params.themerow.bmtMastrNm}}</span>
      </el-form-item>
      <el-form-item label="部門">
        <span v-text=""></span>
      </el-form-item>
      <el-form-item label="申請人">
        <span>{{$route.params.themerow.applyUserNm}}</span>
      </el-form-item>
      <el-form-item label="郵箱">
        <span>{{$route.params.themerow.applyUserEml}}</span>
      </el-form-item>
      <el-form-item label="電話">
        <span>{{$route.params.themerow.applyUserTel}}</span>
      </el-form-item>
      <el-form-item label="用途">
        <span>{{$route.params.themerow.applyResonText}}</span>
      </el-form-item>
      <el-form-item label="附件">
      </el-form-item>
    </el-form>
  </div>
</template>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章