Vue路由传参的三种基本方式

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：

• 方案一

  	// 路由配置
  	{
  		path: '/describe/:id'
  	}
  	
  	// 跳转方式
  	this.$router.push({
  		path: `/describe/${id}`,
  	})
  
  	// 子组件拿参
  	this.$route.params.id
  

• 方案二

  	// 路由配置
  	{
  		path: '/describe',
  		name: 'Describe'
  	}
  	
  	// 跳转方式
  	this.$router.push({
  		name: 'Describe',
  		params: {
  			id
  		}
  	})
  	
  	// 子组件拿参
  	this.$route.params.id
  

• 方案三

  	// 路由配置
  	{
  		path: '/describe',
  		name: 'Describe'
  	}
  	
  	// 跳转方式
  	this.$router.push({
  		path: '/describe',
  		query: {
  			id
  		}
  	})
  	
  	// 子组件拿参
  	this.$route.query.id