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>
2. 接收参数:
```clike
```js
$route.query.id
$route.query.title
3.路由规则
export default new VueRouter({
routes:[
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{ path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
}
]
}
]
}
]
})
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
}
]
}
]
}
(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>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
(3). 接收参数:
```clike
```js
$route.params.id
$route.params.title
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
}
}
}
接收参数
props:['id','title'],
使用
<ul>
<li>消息编号:{{ id }}</li>
<li>消息标题:{{title}}</li>
</ul>