两种传参方式 query 与 params

query:
	this.$router.push({
		path: '/home',
		query: {
			site: [],
			bu: []
		}
	})
params:
	this.$router.push({
		name: 'Home', // 路由名称
		params: {
			site: [],
			bu: []
		}
	})	
params: /router1/:id, /router1/123, /router1/789, 这里的id 叫做 params
query: /router1?id=123, /router?id=456, 这里的id 叫做 query

两者传参参数的区别

query 传递配置的时path，而params传递配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传递刷新会无效，但是query会保存传递过来的值，刷新不变；

路由的配置

query:
	{
		path: '/home',
		name: Home,
		component: Home
	}
params:
	{
		path: '/home/:site/:bu',
		name: Home,
		component: Home
	}	

如果路由上面不写参数，也是可以传递过去的，但不会再URL上面显示出你的参数，并且当你跳转到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数http请求或者其他操作就会失败

 activated () {
    const params = this.$route.params
    if (params) {
      for (let key in params) {
        if (key === 'departure') {
          this.travelData.departure = params[key].key
          this.travelData.departureTxt = params[key].value
          continue
        }
        if (key === 'arrival') {
          this.travelData.arrival = params[key].key
          this.travelData.arrivalTxt = params[key].value
          continue
        }
        // 地图传参会多传递一个 time 字段
        if (key !== 'time') this.travelData[key] = params[key]
      }
      this.calcAmount()
      console.log(params, this.travelData)
    }
  },

在接受跳转的页面获取路由参数

created(){
	let self = this
	self.getParams()
},
watch(){
'$router': 'getParams'
},
methods: {
	getParams(){
		let site = this.$route.query.site
		let bu = this.$route.query.bu
		// 如果是params传参，那就是this.$router.params.site
	}
}

注意

1. params是路由的一部分，必须要有。query是拼接在url后面的参数，没有也没关系。
2. params一旦设置在路由，params就是路由的一部分，如果这个路由params传参，但是在跳转的时候没有传递这个参数，会导致跳转失败或者页面会没有内容。
3. params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况。

最后总结

命名路由搭配params，刷新页面参数会丢失
查询参数搭配query，刷新页面数据不会丢失
接受参数使用this.$route 后面就是搭配路由的名称就能获取到参数的值