Vue路由器4.x为此提供useRoute()：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    onMounted(() => {
      const id = route.params.id
    })
  }
}

demo

如果我们使用最新的Vue 3“脚本设置”SFC方式，则

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

const route = useRoute();  
const id = route.params.id; // read parameter id (it is reactive) 

</script>

您还可以使用组合API来编写自己的组合，当param为数组时，该组合提供更好的语法和优雅的处理。

const id = useRouteParam('id')

组成

import { computed, Ref } from 'vue'
import { useRoute } from 'vue-router'

export function useRouteParam(param: string, useFirstIfArray?: true): Ref<string>
export function useRouteParam(param: string, useFirstIfArray: false): Ref<string | string[]>
export function useRouteParam(param: string, useFirstIfArray = true): Ref<string | string[]> {
  const route = useRoute()

  return computed(() => {
    let paramValue = route.params[param]

    if (useFirstIfArray && Array.isArray(paramValue) && paramValue.length) {
      [paramValue] = paramValue
    }

    return paramValue
  })
}

https://github.com/PrefectHQ/vue-compositions/tree/main/src/useRouteParam