Vue.js Router-Link Params Undefined

Question

In my vue.js, I am using params in my navigation.vue to pass it onto the next page for it to be used for dynamic routing such as the following:

<router-link tag="p" 
  :to="{name: 'Main', params: {category: link.linkCategory}}"  
  :key="link.linkCategory">

The following is the part of router index.js:

export default [
{
    path: '/origin/:category',
    name: 'origin',
    component: () => import('@/views/origin/origin.vue'),
    props: true,
    children: [
        {
            path: '',
            name: 'Main',
            props: true,
            component: () => import('@/views/origin/Main.vue')
        }

So basically I'm passing in the 'category' value as the param for dynamic routing. However, I get this warning message in my console whenever I try to access through the router-link:

[vue-router] missing param for named route "Main": Expected "category" to be defined

All the linkCategory values are stored in a separate link js file for my convenience and the routing does get the values when each link is clicked. The routing of all pages works fine but the console warnings are very annoying...

I know that parameter will be empty before accessing the router-link but I need a way to go around the warnings. I even tried the 'v-if' method but did not work here.

Please fix my code for the wrong things that I did.

Answer 1

What happens if you change the to attribute to a different format as follows?

<router-link tag="p" 
  :to="`/origin/${link.linkCategory}`"  
  :key="link.linkCategory"