Vue route params does not exist on type function

I’m trying to get some params from my route in a vue page so I have the following:

<script lang="ts">
  import { defineComponent } from 'vue';
  import { useRoute } from 'vue-router';

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

      return {
        route,
      };
    },
    name: 'ErrorPage',
    data() {
      return {
        errorCode: this.route.params.errorCode,
      };
    },
  });
</script>

but my compiler is failing with the error

Property ‘params’ does not exist on type ‘Function’.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Is there a way to make this work?

I have also tried using this.$route.params.errorCode without the setup, but get the same error

>Solution :

There is a params property directly on the route object that it returned by the useRoute function. You can use that to access the params in your url.

// ErrorComponent.vue

/* ... */
setup() {
  const route = useRoute();
  
  const errorCode = ref(route.params.errorCode);  

  return {
    route,
    errorCode
  };
},
/** ... **/

Also, make sure that the parameter is correctly defined in your router config:

// router.js

/** ... **/
{
   path: "error/:errorCode",
   component: ErroComponent,
   name: "TheErrorRoute"
},
/** ... **/

As a side note, you should avoid mixing the composition API and the options API, in a single component. My answer considers that you want to use the composition API.