vue路由多个传参的三种基本方式

业务场景：

需要在选中行，查看详情数据，进行页面跳转

前端行数据页面显示

<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