vue全家桶进阶之路35:Vue3 传递参数query和params
在 Vue.js 3.x 中,可以通过路由的 params
和 query
属性来传递参数。
- 通过
params
传递参数
我们可以在路由跳转时通过 params
传递参数。具体方法如下:
// 在组件中跳转路由 import { defineComponent } from 'vue' import { useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const handleClick = () => { // 传递参数 router.push({ name: 'user', params: { id: 123 } }) } return { handleClick } } })
在上述示例中,我们在路由跳转时通过 params
传递了一个名为 id
,值为 123
的参数。在接收方的组件中,我们可以通过 $route.params
对象来获取参数,例如:
// 在接收方组件中获取参数 import { defineComponent } from 'vue' export default defineComponent({ setup(props, { route }) { const id = route.params.id return { id } } })
在上述示例中,我们通过 $route.params.id
获取了传递过来的 id
参数。
- 通过
query
传递参数
与 params
类似,我们也可以在路由跳转时通过 query
传递参数。具体方法如下:
// 在组件中跳转路由 import { defineComponent } from 'vue' import { useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const handleClick = () => { // 传递参数 router.push({ name: 'user', query: { id: 123 } }) } return { handleClick } } })
在上述示例中,我们在路由跳转时通过 query
传递了一个名为 id
,值为 123
的参数。在接收方的组件中,我们可以通过 $route.query
对象来获取参数,例如:
js
// 在接收方组件中获取参数 import { defineComponent } from 'vue' export default defineComponent({ setup(props, { route }) { const id = route.query.id return { id } } })
在上述示例中,我们通过 $route.query.id
获取了传递过来的 id
参数。需要注意的是,查询参数的值始终为字符串类型,如果需要转换为其他类型,需要手动进行转换。