Vue Router系列之（七）路由的props配置项

路由的props配置项

​ 路由组件读取其他组件传递的参数时，是通过$route.params.id这种方式读取的，$route.params 部分代码冗余度高，如何能够降低这种冗余？props配置项可以做到

​ 作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

    //props配置项写在需要接收数据的路由组件的路由规则中
	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    //这种写法只能给路由组件传递死数据
	// props:{a:900}

	//第二种写法：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:id,
			title:title
		}
	} 
}

​ Detail组件中通过组件的props配置项接收数据【组件的props配置项：用于接收外部组件传递的数据】

<template>
	<ul>
		<li>id：{{id}}</li>
		<li>title：{{title}}</li>
	</ul>
</template>

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

路由对浏览器历史记录的影响

关于浏览器历史记录