typescript - Hvordan få parametere fra routeren i Vue 3?

Jeg laget et prosjekt i Vue.js 3 og TypeScript.

router.js

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

App.js

<script lang="ts">

...

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

Men dette resulterer i en feil:

"Kan ikke finne navnet '$route'."

Hva gjør jeg galt?

Svar #1

Vue Router 4.x tilbyr useRoute() for det:

import { useRoute } from 'vue-router'

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

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

demo

Svar #2

Hvis vi bruker den nyeste Vue 3 'script setup' SFC-måten, så

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

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

Relaterte artikler