vuecli3路由传参的方式

路由传参的三种方式
1，params方式传参
想要使用params传参首先要配置路由 这个是配置子组件

{
	// : id 这个是要传的参数
    path: '/about/:id',
    name: 'About',
   component:About
}

父组件中

<!-- 字符串拼接 绑定动态数据 -->
<router-link :to="'/about/'+ id">params方式传参</router-link>

子组件中接受调用父组件传给的数据
使用this.$route.id 就可以获取到传给的参数了

<h1>params传参方式收到的数据：{{$route.params.id}}</h1>

2，使用query的方式传参
query方式传参，不需要配置路由
父组件中

<!-- 这里可以用path 也可以用 name -->
<router-link :to="{path:'/item',query:{id:id}}">query方式传参</router-link>

子组件接收参数
使用 this.$route.query 获取传的参数

<h1>query传参方式收到的数据：{{this.$route.query.id}}</h1>

3，使用 $route.push() 方式传参
这个方式一般都是用时间来触发的

1）单独使用 $router.push()

配置路由
配置路由的方法和params的是方式是一样的

  {
    path: '/sub/:id',
    name: 'Sub',
    component: Sub
  },

父组件

// id 就是要传的参数
<button @click="fun(id)">时间传参</button>
// 用事件引发
  methods:{
	  fun(id){
		 this.$router.push({
		 // 注意里的符号
			 path:`/sub/${id}`,
		 })
	  }
  }

子组件
使用 this.$route.params 就可以找到要传的参数

<h1>$route.push传参方式收到的数据：{{this.$route.params.id}}</h1>

2. 使用 query 传参
   这个方式不用配置路由
   父组件

<button @click="fun2(id)">时间传参</button>
// id是传的参数
fun2(id){
		  this.$router.push({
			  path:'/sak',
			  query:{
				  id:this.id
			  }
		  })
	  }

子组件
使用 this.$route.id 就可以获取到具体的传参了

<p>这是接收到的参数{{this.$route.query.id}}</p>

总结：
传参的方式一共有三种：
params , query $router.push()
如果是用router-link标签跳转的话，就考虑 params 和 query
这里面要注意的是
如果是使用的 params 就要 配置一下路由
如果是使用的 query 就不需要配置路由了

如果不是使用的 router-link 标签那就使用事件来触发路由传参 $router.push()