将路由参数传递至props

路径参数params

对于路径参数params/users/:id，仅需在路由中定义props: true

const routes = [
    ...
    { path: '/user/:id', component: User, props: true }
    ...
]

在User组件中接收

const props=defineProps({
  id: String
})

url路径访问/user/123，在User组件中props.id即为123

查询参数query

对于查询参数/user?id=123，需要在路由中手动处理映射

const routes = [
  {
    path: '/user',
    component: User,
    props: route => ({ id: route.query.id })
  }
]

props传入一个函数，在其中描述query与props的映射关系，并且可以进行值类型的处理（query中的值均为字符串，若props需要直接接收Number等类型，可在此处转换或设置默认值）

关于query传递中文字符串

省流：无需特别处理（无需encodeURIComponent）
官方文档中的说明

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

当使用 push、resolve 和 replace 并在对象中提供 string 地址或 path 属性时，必须进行编码(像以前的版本一样)。另一方面，params、query 和 hash 必须以未编码的版本提供。