Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Router Push Vue is passing undefined params

I am expecting to pass a value by router.push, this is the component where i want to pass it:

<template>
    //some html
</template>

<script>
export default {
    data(){
        //some data
    },
    methods: {
        uploadTemplate(event) {
             if(everythingWell){
                 this.$router.push({name: 'upload-document', params: {value: "[email protected]"}})
             }            
        }     
    }
}    
</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
    }
}

the app change to the upload route but the value of "value" ins undefined, this is the result i get in the browser:

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

I tried usign props, but its still the same

Tags:

2

Answers


  1. 0

    You did not specify an expected parameter in the route:

    const routes = [
  { 
    path: '/upload/:value?',
    name: 'upload-document', 
    component: () => import('./../modules/doc_templates/pages/UploadDocPage.vue')
  }
]
``
    Login or Signup to reply.
  2. 0

    To pass parameters through the route with parameters, you just need to add in the router that the route receives parameters like this:

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

    When props is set to true, the route.params will be set as the component props.

    For more detailed information, you can refer to the Vue Router documentation. Additionally, in the future, you might consider exploring the Composition API as a modern alternative for managing component logic in Vue.js applications.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search