The Vue route parameters are not recognized within the function type

Seeking assistance on extracting parameters from my route in a vue page, I have the following implementation:

<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>

Unfortunately, my compiler is throwing an error:

Property 'params' does not exist on type 'Function'.

Is there a solution to resolve this issue?

I also attempted using this.$route.params.errorCode without the setup but encountered the same error.

Answer №1

In the route object returned by the useRoute function, there is a direct params property that allows you to access the parameters in your URL easily.

// ErrorComponent.vue

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

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

Ensure that the parameter is correctly defined in your router configuration as shown below:

// router.js

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

It's recommended to avoid mixing the composition API and options API within the same component. This answer assumes you want to utilize the composition API.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a unique optional string array interface in TypeScript

I am looking to create an interface that includes optional string values. Here is what I have in mind: interface IEntity { values: ['RemainingUnits', 'ActualUnits', 'PlannedUnits'] } However, when implementing this inter ...

The combination of Node.js, Express router, and TypeScript is causing an issue where a string argument is not compatible with the request

I'm currently working on a tutorial to develop a comprehensive REST API. In the process, I've created a TypeScript class that exports a new Express router: import { Router, Request, Response, NextFunction } from 'express'; export clas ...

PageObjectModel Playwright, execute the locator().all() function - 'The execution context has been terminated, possibly due to navigating to another...'

Hey there, I'm currently working on a basic test using POM. Here is a snippet from one of my PageObjects Class: import { Expect, Page, Locator } from "@playwright/test"; export class InventoryPage { readonly page: Page; readonly addToC ...

Prevent WordPress themes from running in order to integrate a personalized Vue.js front-end application

I'm currently working on a basic website that will utilize vuejs as the front-end framework and wordpress for generating dynamic content. To achieve this, I've placed wordpress inside the public directory of my vue project in a folder named app. ...

Is there a way to define an object's keys as static types while allowing the values to be dynamically determined?

I am attempting to construct an object where the keys are derived from a string union type and the values are functions. The challenge lies in wanting the function typings to be determined dynamically from each function's implementation instead of bei ...

Every time I switch views using the router in vue.js, my three.js canvas gets replicated

After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image ...

What reasons underlie the existence of various methods for importing Modules in JavaScript?

I'm confused about the distinctions when it comes to importing a JavaScript module in various ways such as: CommonJS ES5 ES6 NodeJS Typescript What is the reason for having multiple methods of importing JavaScript modules? Is the concept of a "modu ...

Media publications do not conform to the current trends

I'm currently utilizing the HTML-to-paper plugin to print my content on a printer. However, I've encountered an issue where it doesn't seem to apply any of the styles I've defined within @media print. The challenges I'm encounteri ...

Changing Vue-router routes dynamically

Is it possible to dynamically update routes in Vue-router without the need for a page reload? I am currently loading different route paths depending on the selected language, like this: { path: '/' + i18n.t('url_welcome'), name: &apos ...

Utilizing TypeScript in a browser with a .NetCore WebApplication

After going through numerous articles, I have not been successful in finding a solution. My challenge lies with a .net core WebApplication that utilizes typescript code instead of javascript. Here are the specific requirements: I need to be able to debu ...

Using TypeScript's type casting functionality, you can easily map an enum list from C#

This is a C# enum list class that I have created: namespace MyProject.MyName { public enum MyNameList { [Description("NameOne")] NameOne, [Description("NameTwo")] NameTwo, [Description("NameThree")] NameThree ...

Accessing parent properties in the setup() function of Vue 3 using the composition API. How can you retrieve the context parent

Currently facing a dilemma with Vue 3 (alpha 4): Within the setup() function, I am attempting to access the parent component. According to the guidance provided on , the parent should be accessible via the context argument, either as a property of context ...

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes

Is there a way to trigger a callback function in the scan function after the for await loop completes? let personObj = {}; let personArray = []; async function scan() { for await (const person of mapper.scan({valueConstructor: Person})) { ...

Definition of TypeScript for caching middleware in Express

I recently came across a helpful Medium post that inspired me to create an express middleware function for caching the response. However, I'm facing some challenges while trying to implement it in typescript. Specifically, I am struggling to identify ...

Attach actions to specialized component

Working with Vue3 I'm currently in the process of developing a custom component and I want to bind events to the input element within it. How can I achieve this now that $listeners are no longer available? I am unable to use v-bind="$attrs" ...

Sending a `refresh` to a Context

I'm struggling to pass a refetch function from a useQuery() hook into a context in order to call it within the context. I've been facing issues with type mismatches, and sometimes the app crashes with an error saying that refetch() is not a funct ...

Utilize Pipe for every instance of a variable in the Controller

In my controller, I have multiple requests (POST, GET etc.) where the path includes an id parameter that needs to be a number string. I want to validate this parameter once and have it apply to all instances. Here is the current code snippet: @Get(&apo ...

What is the best way to apply ngClass to style a JSON object based on its length?

Currently, I am working with a mat-table that displays data from a JSON object. My goal is to filter out all records with an ID of length 5 and then style them using ngClass in my HTML template. How can I achieve this? Below is the code I am working with: ...

Splitting files with Webpack generates dynamic chunk files

Anticipating to only have two distinct chunks named vendors and commons, webpack unexpectedly generates a new chunk file for specific entries with a delimiter. optimization: { splitChunks: { chunks: 'all', cacheGroups: { ...

showing the response message from a post request using Vue.js and Axios

Within APIService.js, there's a function: createPatient(data){ const url = 'http://192.168.1.3/api/clinic/patient/add/'; return axios.post(url, data).then(resp => {return resp}); } In the script tag of my vue component: result ...