Vue知识点：路由的props配置

1. 作用：让路由组建更方便的接收参数

//router >>> index.js
routes:[
    ....
	{
	   name:'xiangqing',
	   path: 'detail/:id',
	   component:Detail,
	   //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	   props:{id: '9090',title: '消息标题1111'}
	   //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	   props: true
	   //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	   props($route){ 
	      return {
	         id: $route.query.id,
	         title: $route.query.title
	      }
	   },
	   //或
	   props({query}){ 
	      return {
	         id: query.id,
	         title: query.title
	      }
	   },
	   //或 解构赋值的连续写法
	   props({query:{id,title}}){ 
	      return {id,title}
	   },
	}
]

//Detail.vue
<template>
   <ul>
      <li>消息编号：{{id}}</li>
      <li>消息标题：{{title}}</li>
   </ul>
</template>

<script>
   export default {
      name: 'Detail',
      //对应第一种写法：props值为对象(数据是写死的)
      props: ['id','title']
      //对应第二种写法：props值为布尔值(数据是通过params参数传递过来的)
      props: ['id','title']
      //对应第三种写法：props值为函数
      props: ['id','title']
   }
</script>