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