路由的query/params/props三种传参方式_前端 路由query传参对象形式

1.路由的query参数
该参数有两种写法，一种是to的字符串写法，一种是to的对象写法。

<!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:666,
           title:'你好'
   		}
   	}"
   >跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 接收参数：


```clike
```js
$route.query.id
$route.query.title
1
2
3
4
5
6
7
8

3.路由规则

export default new VueRouter({
    routes:[
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'news',
                component:News,
            },
            {                path:'message',
                component:Message,
                children:[
                    {
                        path:'detail',
                        component:Detail,
                    }
                ]
            }
        ]
    }
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.路由的parms参数
（1）配置路由，声明接收params参数
路由规则

```clike
{
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

（2）传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>
   				
   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

（3）. 接收参数：

```clike
```js
   $route.params.id
   $route.params.title
1
2
3
4
5
6

3.路由的props配置项
作用：让路由组件更方便的收到参数
路由规则

```clike
{
 name:'xiangqing',
 path:'detail/:id',
 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
20
21
22
23
24

接收参数

 props:['id','title'],
1

使用

  <ul>
        <li>消息编号:{{ id }}</li>
        <li>消息标题：{{title}}</li>
    </ul>
1
2
3
4

1