一篇文章弄懂 vue路由传参方式（params && query）_vue params传参

写在前面

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: ["医疗机构填报统计"]
    }
  }
1
2
3
4
5
6
7
8
9

一，params 传参

代码示例

...
data() {
	return {
      	query: {
        	districtCode: "",
        	ownershipCode: "",
        	orgTypeCode: "",
        	orgGradeCode: "",
        	orgLevelCode: "",
        	sentinel: 0, // 哨点医院
        	year: "",
        	month: ""
      },
   }
}   

// 跳转页面点击事件
toDetailClick(){
	this.$router.push({
    	name: "organizationStatistics", // //注意使用 params 传参时一定不能使用 path
		params: this.query, 
	});
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

取参数

this.$route.params
1

二，query 传参

代码示例

...
data() {
	return {
      	query: {
        	districtCode: "",
        	ownershipCode: "",
        	orgTypeCode: "",
        	orgGradeCode: "",
        	orgLevelCode: "",
        	sentinel: 0, // 哨点医院
        	year: "",
        	month: ""
      },
   }
}   

// 跳转页面点击事件
toDetailClick(){
	this.$router.push({
    	path: "stateAnalyseMonthReport/organizationStatistics", 
		query: this.query, 
	});
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

取参数

this.$route.query
1