How to get params of router in vue 3?

Question

I created a project in Vue.js 3 and TypeScript.

router.js

{
    path: "/app/:id",
    name: "Detail",
    component: Detail,
    props: true
  },

App.js

<script lang="ts">

...

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

But this results in an error:

"Cannot find name '$route'."

What am I doing wrong?

Answer 1

Vue Router 4.x provides useRoute() for that:

import { useRoute } from 'vue-router'

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

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

demo

Answer 2

If we are using the newest Vue 3 'script setup' SFC way, then

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

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

</script>