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

Question

用了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) // 为空
})

Answer 1

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

router.push({ path: "/pageA/123" })
// 或者
router.push({ name: componentA, params: { id: 123 } })

Answer 2

Answer 3

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 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

// 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)
})