概念: vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为
params
传参和
query
传参,而
params
传参又可分为在
url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。
一:params传参
params
传参又可分为 声明式 和 编程式 两种方式
1.声明式 ,该方式是通过 router-link
组件的 to
属性实现,该方法的参数可以是一个字符串路径或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例如:
//子路由配置
{
path: '/child/:id',
component: Child
}
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>
2.编程式路由,使用该方式传值的时候,同样需要子路由提前配置好参数,例如:
//子路由配置
{
path: '/child/:id',
component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
path:'/child/${id}',
})
二:params传参
params
传参也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 params
进行传值的
1.声明式,该方式也是通过 router-link
组件的 to
属性实现,例如:
<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link>
2.编程式,使用该方式传值的时候,同样需要子路由提前配置好参数,例如:
//子路由配置
{
// params 需要占位
path: '/child/:id',
name: 'Child',
component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
name:'Child',
params:{
id:123
}
})
三:query传参
query
传参(显示参数)也可分为 声明式 和 编程式 两种方式
1.声明式,该方式也是通过 router-link
组件的 to
属性实现,不过使用该方式传值的时候,需要子路由提前配置好路由别名(name
属性),例如:
//子路由配置
{
path: '/child,
name: 'Child',
component: Child
}
//父路由组件
<router-link :to="{
name:'Child',
query:{
id:123
}}
">进入Child路由</router-link>
//在child组件中获取路由传过来的参数参数
{{$route.query.id}}
2.编程式使用该方式传值的时候,同样需要子路由提前配置好路由别名(name
属性),例如:
//子路由配置
{
path: '/child,
name: 'Child',
component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
name:'Child',
query:{
id:123
}
})
//在child组件中通过以下代码来获取参数
this.$route.query.id