写在前面
Vue 路由传参只有两种,一种是 params 传参,另外一种是 query 传参。
params 传参 :
1,传过去的参数不会显示在地址栏中,不能刷新页面,刷新之后参数会丢失。
2,params 只能配合 name 使用 (为固定搭配)
query 传参
1,传过去的参数会显示在地址栏中,会拼接上参数,例如:?districtCode=11&ownershipCode=01
2,query 传参 不限制 path 或者 name,都可以搭配使用,比较灵活。
// 月报分析 --- 医疗机构填报统计
{
path: "monthReport/organizationStatistics",
name: "organizationStatistics", // 可以理解为 path 的小名
component: getView("stateAnalyse/components/organizationStatistics"),
meta: {
pageTitle: ["医疗机构填报统计"]
}
}
一,params 传参
代码示例
...
data() {
return {
query: {
districtCode: "",
ownershipCode: "",
orgTypeCode: "",
orgGradeCode: "",
orgLevelCode: "",
sentinel: 0, // 哨点医院
year: "",
month: ""
},
}
}
// 跳转页面点击事件
toDetailClick(){
this.$router.push({
name: "organizationStatistics", // //注意使用 params 传参时一定不能使用 path
params: this.query,
});
}
取参数
this.$route.params
二,query 传参
代码示例
...
data() {
return {
query: {
districtCode: "",
ownershipCode: "",
orgTypeCode: "",
orgGradeCode: "",
orgLevelCode: "",
sentinel: 0, // 哨点医院
year: "",
month: ""
},
}
}
// 跳转页面点击事件
toDetailClick(){
this.$router.push({
path: "stateAnalyseMonthReport/organizationStatistics",
query: this.query,
});
}
取参数
this.$route.query