Vue动态路由

Question

我目前正在开发一个应用程序，就动态路由而言，我的代码有问题。我有关于我的 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 中的项目，并且没有页面未找到错误。

Answer 1

您传递的

to

属性应该是如下所述的对象

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