Vue Router Push encounters passing parameters that are undefined

I need to pass a value using router.push in this component:

<template>
    //some html
</template>

<script>
export default {
    data(){
        //some data
    },
    methods: {
        uploadTemplate(event) {
             if(everythingWell){
                 this.$router.push({name: 'upload-document', params: {value: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce9f4ede1fce0e9cce9e1ede5e0a2efe3e1">[email protected]</a>"}})
             }            
        }     
    }
}    
</script>

**my router: **

const routes = [
    { 
        path: '/upload',
        name: 'upload-document', 
        props: {
            default: true
        },
        component: () => import('./../modules/doc_templates/pages/UploadDocPage.vue')
    }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router;

And the upload component, where I should use the props:

<template>
    <div> 
        <p>value: {{ this.value }} </p>
    </div>
</template>

<script>
export default {
    props: {
        value: String
    }
}

When navigating to the upload route, the value of "value" is undefined. The browser displays the following message:

[Vue Router warn]: Discarded invalid param(s) "value" when navigating.

I have tried using props but the issue persists.

Answer №1

Failure to define an anticipated parameter in the designated path:

const routes = [
  { 
    route: '/upload/:value?',
    title: 'upload-document', 
    view: () => import('./../modules/doc_templates/pages/UploadDocPage.vue')
  }
]

Answer №2

If you want to send parameters through the route, simply update the router to include a placeholder for the parameters like so:

{ 
    path: '/upload/:value',
    name: 'upload-document', 
    props: {
        default: true
    },
    component: () => import('./../modules/doc_templates/pages/UploadDocPage.vue')
}

For more in-depth information, feel free to visit the Vue Router documentation.

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

Are there any ways in Vue.js to utilize line breaks using the linefeed character ( )?

I am currently working on creating error messages with notifications in Vue.js. If you would like to see a tutorial demo, please visit: You can also check out the tutorial codes here: https://github.com/vue-bulma/vue-admin/blob/master/client/views/compon ...

Integrate the AWS API Gateway generated SDK into a project managed by NPM

I'm currently in the process of developing a ReactJS application that will interact with backend resources through the API Gateway. I have created a Javascript SDK for my test API, which connects to DynomoDB, and am attempting to integrate it into my ...

Unexpected issue with the JSON.parse() function in a node.js environment

When working with TCP in node.js, I encountered an issue while trying to parse stringifyed JSON data. My code snippet below showcases how I attempted to achieve this. socket.on("data", function(data) { console.log(data.toString()); // Di ...

Can you explain the meaning of EPS in the THREE.OrbitControl function?

The this.update method within the THREE.OrbitControl script contains a private variable called EPS, which is used to adjust the phi angle. The following code snippet demonstrates how it restricts phi to be between EPS and PI-EPS: // restrict phi to be bet ...

Transfer the data from an XML element to generate a fresh element with an integrated value

I am looking to modify an XML file that contains multiple products by adding a new element with values from existing elements. Specifically, I want to add a new element to each product titled SKU, which should include the values of ProductOption, PurchaseO ...

What is the correct way to insert a value into a Vue store and delete it if it already exists?

Suppose we want to update the "favorites" value in a Vue store: If it's already there, REMOVE it Otherwise, ADD it I acknowledge that the following code may not be the most correct or efficient way to accomplish this task. Thus, I am curious to fin ...

The Angular TypeScript service encounters an undefined issue

Here is an example of my Angular TypeScript Interceptor: export module httpMock_interceptor { export class Interceptor { static $inject: string[] = ['$q']; constructor(public $q: ng.IQService) {} public request(config: any) ...

The Jquery map function is not returning selected options, always returning empty values. It seems to be avoiding the variable, although it functions properly on jsfiddle. There are

RESOLVED: Final solution: http://jsfiddle.net/AcfUz/220/ *applied the selector mentioned in the selected answer and adjusted the console.log value to appear before the text input, where the chosen options were supposed to be displayed, and voila--it&apo ...

What is the best way to configure routes for a Single Page App with Express.js?

I am currently in the process of developing a single page application using Express.js. On my index.html file, I have included a simple form that, upon submission, will send a request to an API, fetch the data, process it, and then display the parsed infor ...

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

Can a small white pop-up be triggered by clicking a button?

While exploring the website , I noticed that clicking on Availability Zones opens a small window with text on the right side of the page. Is it possible to achieve a similar feature on a leaflet map without using JavaScript? This functionality would be tri ...

Is it achievable to assign a various value to the data attribute of a transition object in Ember.js?

Is there a way to set the data object when transitioning from a route using the transitionTo method? Upon entering the target route, I noticed that the transition object in my model hook has an empty attribute data: {}. What is the purpose of this object ...

Is it necessary to specify the inputs property when defining an Angular @Component?

While exploring the Angular Material Button code, I came across something interesting in the @Component section - a declared inputs property. The description indicates that this is a list of class property names to data-bind as component inputs. It seems ...

How can I preserve the backslashes when passing a file path from a child window to an opener in asp.net?

I attempted to transfer a string value from a child window to the text box in an open window. The specific value is: string fileName = @"C:\aaa.txt"; After sending the above value to the parent window, the backslash \ disappears automatically, ...

Error in JavaScript goes undetected when utilizing asynchronous AJAX

Having recently started working with ajax and javascript, I find myself puzzled by the fact that my error is not getting caught when making an asynchronous ajax call. I did some research on a similar issue in this query (Catch statement does not catch thr ...

Issues with v-model functionality on input field in Laravel app when using Vue JS are causing problems

Currently, I am integrating vuejs into a Laravel app for some minor functionality. For some unknown reason, v-model is not functioning as expected. Below is the base layout blade file created using php artisan make:auth, with most of the content removed: ...

What is the best way to create a balanced 2 column grid layout in React Native?

I've been struggling with creating a 2 column list that's scrollable. I've tried using CSS Flex and FlatList, but I can't seem to get it right. Here's my database table structure: id title pic 1 First 4 A ...

creating URLs using javascript

I am seeking guidance on how to dynamically generate URLs for different languages using JavaScript. When the server sends JSON data to the frontend, I have a header file and a helper function that helps in creating URLs in JavaScript. I am trying to figu ...

Using JQUERY to store the ID of a div along with its checked value in a multidimensional array

I am looking to create an array that stores the ID of a div and the checked value. Check out this FIDDLE for reference For example, if I check samsung and lenovo under brands, and select 4gb for RAM, the array should be: array[ ] = ["brands" ...

Traverse an array containing nested objects using Javascript

I am facing difficulty printing out objects stored in an array. When I console log, this is the result: console.log(product.categories) https://i.stack.imgur.com/YVprQ.png How can I iterate through these nested objects to display them individually like t ...