六、【Vue-Router】路由的props配置

六、路由的props配置

1、vur-router的props

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

{
  name: 'detail',
  path: 'details/:id/:title/:desc',
  component: Detail,

  //第一种写法：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
   	}
  }
}

---

2、第一种写法：props值为对象

1、router/index.js

{ // 二级路由
    path: 'message',
    component: Message,
    children: [
        { // 三级路由
            name: 'detail',
            path: 'details/:id/:title/:desc', // 配置占位符
            component: Details,
            props: { a: 900 }
        }
    ]
}

2、Details.vue

<template>
    <div>
        <ul>
            <li>消息标题：{{$route.params.title}}</li>
            <li>消息内容：{{$route.params.desc}}</li>
        </ul>
        <div>a:{{a}}</div>
    </div>
</template>

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

3、Result

4、弊端

只能传死数据，基本不用

---

3、第二种写法：props值为布尔值

1、router/index.js

{ // 二级路由
    path: 'message',
    component: Message,
    children: [
        { // 三级路由
            name: 'detail',
            path: 'details/:id/:title/:desc', // 配置占位符
            component: Details,
            props: true
        }
    ]
}

2、Details.vue

<template>
    <div>
        <ul>
            <li>消息标题：{{title}}</li>
            <li>消息内容：{{desc}}</li>
        </ul>
    </div>
</template>

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

3、Result

4、弊端

只能将params参数通过props传给组件，query不行！

---

4、第三种写法：props值为函数

1、router/index.js（其余文件沿用上面的）

{ // 二级路由
    path: 'message',
    component: Message,
    children: [
        { // 三级路由
            name: 'detail',
            path: 'details/:id/:title/:desc', // 配置占位符
            component: Details,
            props(route){ // router每次调的时候会把 $route 传进来，你想怎么取就怎么取！
                return {
                    id: route.params.id,
                    title: route.params.title,
                    desc: route.params.desc
                }
            }
            // es6解构赋值写法更简单
            //props({query: {id, title, desc}}){
            //    return {id, title, desc}
            //}
        }
    ]
}

2、优点

毫无限制可言！你还在犹豫什么？用它！！！