Vue路由跳转并传值的三种方式，希望帮助到大家

Vue路由跳转并传值的三种方式

1、 <router-link :to="{name:'XXX',query:{id:1,pageSize: 10}}"></router-link>

	优劣势：明文传参  URl路径会显示传递的参数
	优点：页面刷新参数不会丢失，缺点：参数公开。

		this.$router.push({
		  name: 'EditDetail',
		  query: {
		    id: 1,
		    pageSize: 10
		  }
		})

接收值: this.$route.query.id

2、<router-link :to="{name:'XXX',params:{id:1,pageSize: 10}}"></router-link>

优点：浏览器地址栏看不见参数，参数不显示。
缺点：页面刷新参数会消失。

		this.$router.push({
		  name: 'EditDetail',
		  params: {
		    id: 1,
		    pageSize: 10
		  }
		})

接收值： this.$route.params.id

3、冒号形式的传参

		handleClick (id) {
			this.$router.push({
				name: 'detail',
				params: { id: id }
			})
		}