一、情景说明

我们在之前学习了路由组件的参数传递技术
但是，我们发现，在接收参数时，我们的写法太繁琐

        <li>消息编号：{{$route.params.id}}</li>
        <li>消息标题：{{$route.params.title}}</li>

这里，我们就学习props配置，来简化接收参数的写法。

二、案例

1、对象写法（很少用）

//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
props:{a:1,b:'hello'}

接收参数的组件：

    export default {
        name: "Detail",
        props:['a','b']
    }

        <li>a：{{a}}</li>
        <li>b：{{b}}</li>

2、布尔值写法（针对params传参）

//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
props:true

接收参数的组件：

    export default {
        name: "Detail",
        props:['id','title']
    }

        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>

3、函数写法（弥补布尔值写法不接收query传参问题）

功能最强大

//props的第三种写法，值为函数
props($route){
	return {
		id:$route.query.id,
		title:$route.query.title,
		a:1,
		b:'hello'
	}
}

接收参数的组件：

    export default {
        name: "Detail",
        props:['id','title']
    }

        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>

三、完整的路由配置

index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,

							//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
							// props:{a:1,b:'hello'}

							//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
							// props:true

							//props的第三种写法，值为函数
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})