1.路由的query参数
<!-- 跳转并携带query参数，to的字符串写法 跳转的是path路径-->
<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-1接收参数
2. 接收参数：
this.$route.query.id
this.$route.query.title
2.命名路由
> 作用：可以简化路由的跳转。
给路由命名：
{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ]
2-1：命名路由如何跳转和传参
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>3.路由的params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]}
3-1:params跳转传递参数(字符串拼接) ：to字符串拼接的时候必须使用路由占位符( path:'detail/:id/:title')
跳转
3-1-1.params跳转接收参数(使用路由占位符的时候才可以下面方法)：
this.$route.params.id
this.$route.params.title
3-2:params跳转传递参数(：to对象)
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"跳转
3-2-1.params跳转接收参数（:to对象）：
this.$route.params.id
this.$route.params.title
3-3.props接收参数
跳转
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
props:true,
component:Detail
}
]
}
]}
3-3-1.props接收参数接收：
props:["id"],
3-4.props接收参数
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"跳转
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail', //使用占位符声明接收params参数
props:true,
component:Detail
}
]
}
]}
3-4-1.props接收参数接收：
props:["id"],
这样照样可以： {{$route.params.id}}
>
## 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
