Vue3组合式API中如何获取路由参数？

在Vue3的<script setup>语法中，不会自动注入全局的$route和$router对象，所以直接在脚本里使用$route会抛出未定义的错误，而模板中因为Vue的自动注入机制可以正常访问。

要在<script setup>中获取路由参数，需要通过vue-router提供的组合式API钩子useRoute来实现，步骤如下：

1. 从vue-router导入useRoute函数
2. 调用useRoute()获取当前路由实例
3. 通过路由实例的params属性访问id参数

修正后的代码示例：

// PageView.vue
<script setup>
import { onMounted } from "vue";
import { useRoute } from 'vue-router'; // 导入useRoute钩子

const route = useRoute(); // 获取当前路由实例

onMounted(async () => {
  console.log(route.params.id); // 通过路由实例访问参数
}); // 补全onMounted的闭合括号
</script>

另外注意你原代码中onMounted的回调函数末尾缺少闭合的)和}，这也会导致语法错误，修正时需要一并补上。

内容的提问来源于stack exchange，提问作者Max Pattern