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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值