Missing param for named route: Expected "x" to be defined

Question

Whether I do this

Vue.router.push({ path: '/beats/catalog/1' }) 

or this

Vue.router.push({ name: 'BeatsCatalog', params: { page: 1 } })

I get the same result: [vue-router] missing param for named route "BeatsCatalog": Expected "page" to be defined.

Router:

{
        path: '/beats',
        components: {
            navbar: Navbar,
            default: { template: `<router-view/>` }
        },
        children: [{
                name: 'BeatsCatalog',
                path: 'catalog/:page',
                components: {
                    default: () => import('@/views/BeatsCatalog')
                },
                props: { default: true }
            },
            {
                path: 'upload',
                name: 'BeatsUpload',
                components: {
                    default: () => import('@/views/BeatsUpload')
                }
            },
        ],
        meta: { requiresAuth: true }
    }

What's causing the issue? I see nothing wrong with my setup, I'm doing everything like in the documentation. Thanks.

Answer 1

@Giacoma, In your data property on the component BeatsCatalog the page is undefined when initally loaded. Hence you get the error.

So to solve this wrap your router-link in v-if.

Reference for the same error with better explaination is here:

https://github.com/vuejs/vue-router/issues/986