Vue 3 中如何使用 Composition API 在 setup 函数中访问路由参数（route params）？

Vue 3 中如何使用 Composition API 在 setup 函数中访问路由参数（route params）？

在 Vue 3 的 Composition API 中，可以通过使用 vue-router 提供的 useRoute 函数来访问当前路由信息，包括路由参数。具体步骤如下：

1. 首先确保已安装并配置好 vue-router（版本需为 4.x，适配 Vue 3）。
2. 在组件的 setup 函数中导入 useRoute：

   import { useRoute } from 'vue-router'
   

3. 调用 useRoute() 获取当前路由对象：

   export default {
     setup() {
       const route = useRoute()
       // 访问路由参数，例如 /user/:id 中的 id
       console.log(route.params.id)
       return {}
     }
   }
   

完整示例：

<template>
  <div>User ID: {{ userId }}</div>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const userId = computed(() => route.params.id)
    return { userId }
  }
}
</script>

解析：

• useRoute 是 vue-router 4 为 Composition API 提供的钩子函数，返回当前活跃路由的响应式对象。
• route.params 是一个普通对象，但 useRoute 返回的 route 是响应式的，因此当路由变化时，params 也会自动更新。
• 若需在模板中直接使用，建议用 computed 包装以获得更好的响应式行为和类型推断（尤其在 TypeScript 中）。

注意：不要与 Options API 中的 this.$route 混淆，Composition API 中没有 this 上下文，必须显式使用 useRoute。