在 Vue 3 中使用 setup 取得当前路由的 params

小弟在网上找的範例为:

<script setup lang="ts">import { useRoute } from 'vue-router';const route = useRoute();const params = route.params; // 回传 undefined</script>

解决方式:

<script setup lang="ts">import { useRouter } from 'vue-router';const router = useRouter();const params = router.currentRoute.value.params;</script>

程式码的运作原理如下：

先汇入 useRouter 函式，它来自 Vue3 的 vue-router 库，用于获取路由相关的资讯。接着，我们使用 useRouter 函式来初始化 router 物件，它包含了路由相关的方法和资讯。透过 router.currentRoute.value.params，我们就可以获取当前路由的所有 params。