六、路由的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
   	}
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

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

1、router/index.js

{ // 二级路由
    path: 'message',
    component: Message,
    children: [
        { // 三级路由
            name: 'detail',
            path: 'details/:id/:title/:desc', // 配置占位符
            component: Details,
            props: { a: 900 }
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

2、Details.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

2、Details.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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}
            //}
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、优点

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