Vue dynamic routing

Question

I am currently developing an app and something is wrong with my code as far as dynamic routing is concern. I have data on my firebase and bringing it to the app. For each department on my database it should generate a navbar. When I click at a singular navbar item it should automatically generate a page with the reports related to that navbar. I currently have the following:

       <div>
            <table>
                <tr>
                    <td v-for="item in filteredDocuments" :key="item.id">
                        <nav class="main-nav">
                            <router-link :to="`OutrosRelatoriosIndividuais/${item.id}`">
                               {{ item.nome_orgao }}
                            </router-link>
                        </nav>
                    </td>
                </tr>
            </table>
        </div>

This should generate the navbar with the items from the data base and display the name of the department. My router looks like so...

{
    path: '/outrosrelatoriosindividuais/:id',
    name: 'OutrosRelatoriosIndividuais',
    component: OutrosRelatoriosIndividuais,
    beforeEnter: requireAuth,
    props: true,
]
  },

But when I run it, I am getting an error and the items are not being displayed:

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "OutrosRelatoriosIndividuais/1awcbvPcIg0W8lKzYZN3"

I am expecting the page to return with the items from firebase and without the page not found error.

Answer 1

:to="`OutrosRelatoriosIndividuais/${item.id}`"

That means: go to a route named Outros.../1aw....

You can do this:

:to="`/OutrosRelatoriosIndividuais/${item.id}`"

means go to a route at path /Outros.../1aw...

Answer 2

Try sending an object with the right path name as specified below

<router-link :to="{path: `outrosRelatoriosIndividuais/${item.id}`}">
  {{ item.nome_orgao }}
</router-link>