作用：让路由组件更方便的收到参数
第一种写法：props值为对象，
该对象中所有的key-value的组合最终都会通过props传给Detail组件
children: [
{
name: 'xiangqing',
path:'detail',
component: Detail,
// props对象中所有的key-value的组合最终都会通过props传给Detail组件
props:{
id: '888',
title: '你好啊'
}
}
]
在Detail组件中使用props接收传递来的数据
<template>
<div>
<ul>
<li>接收的id为{
{id}}</li>
<li>接收的title为{
{title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Detail',
// 接收组件传递来的数据
props: ['id', 'title']
}
</script>
这种写法传递的参数不灵活 一般很少使用
第二种写法：props值为布尔值
props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
{
name: 'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component: Detail,
// 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
props: true
}
传递params参数
<li v-for="item in list" :key="item.id">
<router-link :to="{
name: 'xiangqing',
params: {
id: item.id,
title: item.title
}
}">{
{
item.title }}</router-link>
</li>
组件内部使用props接收参数
<template>
<div>
<ul>
<li>接收的id为{
{
id}}</li>
<li>接收的title为{
{
title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Detail',
// 接收组件传递来的数据
props: ['id', 'title']
}
</script>
这种写法相对比上一种传参更为简介灵活 但是只能作用于params类型的参数 无法对query类型的参数起作用
第三种写法：props值为函数
该函数返回的对象中每一组key-value都会通过props传给Detail组件
{
name: 'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component: Detail,
// 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
// props函数会自动调用并提供一个$route参数 可以通过$route来获取想要的数据传递给组件
props($route) {
return {
id: $route.params.id,
title: $route.params.title,
// 还可以返回一些别的数据
a: 1,
b: "hello"
}
}
}
组件内部使用props接收参数
<template>
<div>
<ul>
<li>接收的id为{
{
id}}</li>
<li>接收的title为{
{
title}}</li>
{
{
a}}-----{
{
b}}
</ul>
</div>
</template>
<script>
export default {
name: 'Detail',
// 接收组件传递的参数
props: ['id', 'title', 'a', 'b']
}
</script>
这种方式传递数据更为灵活 通过函数的$route参数来获取需要的数据传递给组件另外还可以携带一些其他数据 通过$route可以获取params和query两种形式的参数 相对前两种方式来说功能更加的强大