vue路由多个传参的三种基本方式
业务场景:需要在选中行,查看详情数据,进行页面跳转前端行数据页面显示<el-table-column label="更多操作" width="90" ><template slot-scope="scope"><el-button type="success" @click="showSlineDetai...
·
业务场景:
需要在选中行,查看详情数据,进行页面跳转
前端行数据页面显示
<el-table-column label="更多操作" width="90" >
<template slot-scope="scope">
<el-button type="success" @click="showSlineDetail(scope.row)">查看详情
</el-button>
</template>
</el-table-column>
查看详情按钮,传递多个参数到跳转页面
//页面跳转
showSlineDetail(row){
/* console.log(row.slineid);
console.log(row.startTime);
console.log(row.endTime);*/
const slineIdStr = row.slineId;
const startTimeStr = row.startTime;
const endTimeStr = row.endTime;
this.$router.push({
/*name: "/slineCapaStat/${slineIdStr}/${startTimeStr}/${endTimeStr}",*/
path: "/slineCapaStat",
query: {
slineIdStr: slineIdStr,
startTimeStr: startTimeStr,
endTimeStr: endTimeStr
}
});
},
跳转的页面路由配置:
{
path: '/slineCapaStat',
component: slineCapaStat,
name: 'slineCapaStat',
meta: {title: '流水线日统计信息'}
},
跳转到页面的多个参数接收
跳转的页面需要接收参数,进行数据查看,下拉框的数据选中等数值绑定
data中定义变量接收传过来的参数:
slineIdStr: '',//页面传值参数接收
startTimeStr: '',
endTimeStr: '',
在watch中监听路由($route,跳转到页面和关闭页面值都会变),我只需要跳转进来时进行判断时哪个路径跳转到这里的:
watch : {
'$route' : {
immediate : true,
handler : function (val, oldVal) {
/* console.log(val, '路由');*/
if (val.path==='/slineCapaStat'){
//查询所有流水线数据
this.queryAllSlineData();
this.slineIdStr = this.$route.query.slineIdStr;
this.startTimeStr = this.$route.query.startTimeStr;
this.endTimeStr = this.$route.query.endTimeStr;
/*选中*/
this.sidList = this.slineIdStr;
this.date.push(this.startTimeStr);
this.date.push(this.endTimeStr);
//触发查询
if (this.$route.query.slineIdStr !=null && this.$route.query.startTimeStr !=null){
this.queryBtn();
}
}
}
},
},
参考:https://segmentfault.com/a/1190000012393587
更多推荐
已为社区贡献11条内容
所有评论(0)