为什么在vue3中接收到路由参数?

用了query和param传都不行都是为空,难道不是这样接收的吗https://router.vuejs.org/zh/guide/essentials/passing-props.html

// pageA

const add = (record:any) => {

router.push({ path: "/pageB", params: { id: 123 } })

}

// pageB

import { useRoute } from "vue-router"

const router = useRoute()

onMounted(() => {

console.log(router.params.id) // 为空

})


回答:

试试这样,path可能不能和params一起用,文档

router.push({ path: "/pageA/123" })

// 或者

router.push({ name: componentA, params: { id: 123 } })


回答:

为什么在vue3中接收到路由参数?


回答:

path 跳转的方式不能用 params 传递,所以你直接拼接在正确的动态路由位置就好了,比如说这样跳转:

const add = (record:any) => {

- router.push({ path: "/pageB", params: { id: record.id } })

+ router.push({ path: "/pageB/" + record.id})

}

而且最近 vue-router 4.1.4+ 是做了一个功能的,没有显示声明的 params 参数会被丢弃,具体参看这篇 更新日志。之前有一个其他问题遇到了这个情况 vue3中params跳转到的页面拿不到params的值?


本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。


回答:

// pageA
const add = (record:any) => {
router.push({ path: "/pageB", query: { id: 123 } })
}

// pageB
import { useRoute } from "vue-router"
const router = useRoute()
onMounted(() => {
console.log(router.query.id)
})

以上是 为什么在vue3中接收到路由参数? 的全部内容, 来源链接: utcz.com/p/933831.html

回到顶部