Vue动态路由报错：路径匹配失败，Firebase导航栏无法显示

DevOps 小满

2026-7-8

问题解决方法

核心问题

报错的根源是路由路径不匹配，具体有两个关键问题：

路径大小写不一致：路由配置的path是全小写的/outrosrelatoriosindividuais/:id，但router-link里用了大写开头的OutrosRelatoriosIndividuais，Vue Router的路径区分大小写，导致无法匹配。
缺少绝对路径前缀：router-link的路径没有以/开头，会被解析为相对当前页面的路径，而非根路径下的目标路由。

修复方案

方案1：直接修正路径格式

调整router-link的:to属性，确保路径和路由配置完全一致（小写+开头斜杠）：

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

方案2：使用命名路由（更推荐）

通过路由的name属性跳转，无需手动拼接路径，从根源避免大小写、格式错误：

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

额外修复：路由配置的语法错误

你的路由配置代码里存在一个多余的]，需修正为：

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