路由props配置

我们在上文中写道了路由传值，我们模拟的是两个 如果需要多个呢 我们也不能去写多个，这样造成累赘代码过多，不利于后期维护，那我们可能会想到计算属性，但是计算属性也不是最好的解决方式，他也照成了代码累赘，这里我们将学习一个新的配置：路由props配置。他的作用是让路由组件更加方便的收到参数。

注意：谁接收东西 写在谁哪里 我们这里是Detail组件接收东西 所以props写在他的路由组件中

           什么传的什么接  我们是props传的 所以要使用props来接收

第一种写法：props值为对象，该对象中所以key-value的组合最终会通过props传给组件 

（写死的 用的很少 但是需要知道 ）

//在index.js
  props：{a:900,b:700}

//在组件页
<template>
	<ul>
		<li>消息编号：{
   
   {a;a}}</li>
		<li>消息标题：{
   
   {b:b}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		props:['a','b'],
	               }
</script>

第二种写法：值为布尔值，假如布尔值为真，就会把路由组件收到的所有params参数，一props形式传给组件（仅限于params参数）

//在index.js页
props:ture

//在组件页
<template>
   <ul>
     <li>消息通知：{
   
   {id}}</li>
     <li>消息内容：{
   
   {title}}</li>

</ul>
</templata>

<script>
	export default {
                     props:['id','title']
                   }
</script>

 第三种写法：值为函数

//index.js
props($route){  //回调函数
    return {id:'$router.query.id',title:'你好啊'}
}

//组件页
<template>
	<ul>
		<li>消息编号：{
   
   {id}}</li>
		<li>消息标题：{
   
   {title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		props:['id','title'],
	}
</script>

那我们这里涉及到了回调函数 什么是回调函数呢？

回调函数就是定义了的，不调用。但是执行的。

我们这里再来说一个新的东西叫做：结构赋值和结果赋值连续写法

//index.js
props({query}){  //结构赋值
    return {id:'$router.query.id',title:'你好啊'}
}

//index.js
props({query:{id,title}}){  //结构赋值的连续写法
    return {id,title}
}