params传参

与前文的query传参，代码基本一致，只列出不一样的地方。

Staff.vue：

<router-link 
  :to="{
    name: 'staffInfo',//只能用name，别用path
    params: {
      id: staff.id,
      name: staff.name,
      age: staff.age
    }
  }">{{ staff.name }}</router-link>

注意：与query不同，params传参，必须使用name，不能使用path！

前文设置路由的时候说每个路由的“name”是选配，但还是都给配上，就是为了此处使用。

StaffInfo.vue：

const { params } = toRefs(route)

{{ params.id }}

前文toRefs出来的是query，这里就是params。

修改路由配置router/index.ts：

{
  path: '/staff',
  name: "staff",
  component: Staff,
  children: [
    {
      path: 'info/:id/:name/:age?',
      name: "staffInfo",
      component: StaffInfo
    }
  ]
}

StaffInfo的路由配置写法有了不同，主要是path。?代表可选。

query与params传参的区别以及适用场景，大家有兴趣可以搜一下或者问AI，我就不在这里水字数了。

不过大家只需要记住一点，二者的根本区别在于URL形成的最终形式，即：

• query传参：/staff/info?id=1&name=leo&age=35
• params传参：/staff/info/1/leo/age

props传参

前面使用了query、params传参，在页面显示的时候基本上就是：

const route = useRoute()
{{ route.query.id }}
//或者
const { query } = toRefs(route)
{{ query.id }}

属性前面总是有前缀，如果我们想直接用{{id}}这种形式，就需要用到props。

不过涉及到props的知识点，应该放在本文前面讲比较合适，主要涉及到组件基础、组件通信。而组件通信又有很多方案，要花不少篇幅来讲，而且又能衍生出状态管理器（Vuex、Pinia），太多了。

本节就简单地说一下如何用props传参。

修改router/index.ts：

children: [
  {
    path: 'info/:id/:name/:age?',
    name: "staffInfo",
    component: StaffInfo,
    props: true
  }
]

在路由上设置`props: true`，props只能映射params参数，但不能映射query。

Staff.vue的写法与上节params传参的写法相同。

StaffInfo.vue：

<template>
    <div class="staffInfo">
        <ul>
            <li>主键：{{ id }}</li>
            <li>姓名：{{ name }}</li>
            <li>年龄：{{ age }}</li>
        </ul>
    </div>
</template>
<script lang='ts' setup name='StaffInfo'>
defineProps(['id', 'name', 'age'])
</script>

如果想prpos能映射query，修改router/index.ts：

children: [
  {
    path: 'info/:id/:name/:age?',
    name: "staffInfo",
    component: StaffInfo,
    props(route: any) {
      return route.query
    }
  }
]

Staff.vue的写法与上节query传参写法相同。StaffInfo.vue不变。

还可以更复杂一些，使用函数类型：

children: [
  {
    path: 'info/:id/:name/:age?',
    name: "staffInfo",
    component: StaffInfo,
    props:(router:any)=>({
      id:router.params.id,
      name:"默认姓名",
      age:router.query.age
    })
  }
]

可以传params、query、静态常量。实际工作中应该没这么写的，我这里就是展示一下可能性。

注意：无论是params、query还是props方式传参，都无法传递复杂的对象、对象数组。可以传string、number、boolean或者这些类型的数组。

如果非要传对象或对象数组，要么将其转为JSON字符串，接收方再反序列化（JSON.stringify、JSON.parse）。要么用URLSearchParams手工处理。这两种方法大家可以搜一下具体的代码实现，本文就不赘述了。

不过这些都太麻烦，也不优雅。实际工作中，多是传递唯一标识（id），接收方从状态管理库（Vuex、Pinia）或者通过API从服务端获取具体的数据。