我目前正在开发一个应用程序，就动态路由而言，我的代码有问题。我在我的Firebase上有数据，并将其带到应用程序中。对于我的数据库中的每个部门，它应该生成一个导航栏。当我点击一个单一的导航栏项目，它应该会自动生成一个页面，与该导航栏相关的报告。我目前有以下几个：

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

这应该会产生导航栏与项目从数据库和显示部门的名称。我的路由器看起来像...

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

但是当我运行它时，我得到一个错误，项目没有显示：

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

我期待页面返回的项目从firebase和没有页面找不到错误。