Vue Router 的三种常用参数传递方法:params与query详解
最编程
2024-08-01 19:25:21
...
路由传参:
传参方式可分为params
传参和query
传参,其中params
又可分为url中显示参数和不显示参数
1、params
传参(显示参数)
- 声明式:
router-link
该方式通过router-link
的to
属性实现,子路由需要提前配置好参数
{
path: '/child/:id',
component: Child
}
<router-link :to="/child/1"> 跳转到子路由 </router-link>
- 编程式:
this.$router.push
该方式同样需要子路由提前配置好参数
{
path: '/child/:id',
component: Child
}
this.$router.push({
path:'/child/${id}',
})
接收: this.$route.params.id
2、params
传参(不显示参数)
也可分为声明式和编程式两种方式,与显示参数不同的是,这里是通过路由的别名 name
进行传值的
{
path: '/child,
name: 'Child',
component: Child
}
<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>
this.$router.push({
name:'Child',
params:{
id:1
}
})
接收: this.$route.params.id
3、query
传参(显示参数)
- 声明式:
router-link
{
path: '/child,
name: 'Child',
component: Child
}
<router-link :to="{name:'Child',query:{id:1}}">跳转到子路由</router-link>
- 编程式:
this.$router.push
{
path: '/child,
name: 'Child',
component: Child
}
this.$router.push({
name:'Child',
query:{
id:1
}
})
接收: this.$route.query.id
下一篇: 如何在URL中传递参数(路由query)
推荐阅读
-
用Vue3.0打造Todo List:探索query参数与params传递方法的实践指南
-
Vue Router: 详解参数传递 - params与query的区别与用法
-
Vue Router: 传递参数的两大方法详解 - 方案二:通过params传递显式参数
-
Vue 3里的query与params参数在路由传递中的应用与操作指南
-
详解Vue Router 3.x 的三种主要参数传递方法
-
Vue Router 的三种常用参数传递方法:params与query详解
-
Vue 3中三种路由参数传递方式详解:query、params与动态路由参数——从query传参开始
-
Vue路由传递参数技巧:query方式与params方式的对比
-
深入理解Vue中的路由参数传递:params vs. query的区别与用法
-
Vue 3.0 路由跳转中的参数传递:params与query详解