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.

Are you sure that the list of "filteredDocuments" is loaded when the Vue.js component is mounted? I guess this list comes from a query to the Firebase DB and this is an asynchronous action. You should wrap-up your table in an v-if tag linked to a value that you set to true when the asynchronous action is completed. — Renaud Tarnec
– Renaud Tarnec, Commented Oct 16, 2023 at 9:50

Amaarockz · Accepted Answer · 2023-10-16 07:06:03Z

0

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

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

answered Oct 16, 2023 at 7:06

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amaarockz Over a year ago

@jesseulundo Great! If it works for you and you are happy - then in general you would accept the answer. This will not only help other people with the same issue but it will also mean people are more likely to help you in the future with any other issues you have. You can read about accepting here: stackoverflow.com/help/accepted-answer

typed-sigterm · Accepted Answer · 2023-10-16 15:06:48Z

0

: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...

answered Oct 16, 2023 at 15:06

typed-sigterm

1,2591 gold badge13 silver badges37 bronze badges

Collectives™ on Stack Overflow

Vue dynamic routing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related