Redirect error when using $router.push to component with props vue-router

Question

I've got an issue with vue-router, trying to redirect from a composant to another with $router.push and props. Here's the code :

this.$router.push({path: '/badges/search', query: {filter: item.tag_id}})

In the route definition :

{ path: '/badges',
    name: 'Badges',
    component: require('./components/pages/Badges.vue'),
    beforeEnter: requireAuth,
    children: [{
        path: 'search',
        name: 'Badge-id',
        components: require('./components/pages/Badges.vue'),
        props: (route) => ({filter: route.query.filter})
   }]
}

And finally, here's the error I get :

vue-router.esm.js:1697 TypeError: Cannot read property '_c' of undefined
at render (http://localhost:8080/app.js:27823:91)
at http://localhost:8080/app.js:30450:17
at http://localhost:8080/app.js:30477:66
at Array.map (native)
at http://localhost:8080/app.js:30477:38
at Array.map (native)
at flatMapComponents (http://localhost:8080/app.js:30476:26)
at http://localhost:8080/app.js:30415:5
at iterator (http://localhost:8080/app.js:30220:7)
at step (http://localhost:8080/app.js:30103:9)

Does someone have an idea why I get this error ? Also, trying to log "this" object in the new component (Badges) in the created method, it has never been different of "undefined", even with a while loop (I got it infinite)

Thanks a lot for help !

David Restrepo David Restrepo · Accepted Answer · 2018-02-19T02:02:56

use params for send the props:

this.$router.push({path: '/badges/search', params: {filter: item.tag_id}})

Redirect error when using $router.push to component with props vue-router

1 Answers