最近在做项目的时候遇到通组件传参,我发现如果是两个页面之间是使用路由跳转的时候其实完全可以直接用路由传参的时候把数据带到指定页面,方法如下:
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>