基于ID的动态路由问题，vue firebase

Question

我有一个导航菜单，其中列出了大量可以添加或删除工作表的工作表。所以当我点击一个项目(工作表(时，我想访问它，所以基本上我想访问一个带有工作表ID的路线，这样我就可以进行更改。现在我的路线是这样的：

const routes = [

{ path: '/:id', name: 'singleSheet', component: singleSheet },
];

在我的Sheets.vue中，我得到了一个v，用于列出我的纸张的位置

<v-card
class="mx-auto pa-3 ma-2 text-center"
max-width="400"
v-for="todo in filteredTodos"
:key="todo.id"
@click="doSomething()"
>
<v-card-text>
<router-link v-bind:to="'/'+todo.id">{{ todo.name }}</router-link>
<v-btn icon color="red" class="ml-15" @click="deleteItem(todo.id)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-card-text>
</v-card>

因此，正如您所看到的，当我单击工作表的名称时，有一个路由器链接到'/'+todo.id。

例如，我得到的是：http://localhost:8080/5ynxSb1El4yPNuBZ4HpK

但我的路线没有改变，所以我的意思是，我的singleSheet.vue没有显示(这应该是因为在我的路线中(正如你所看到的(将它们连接在一起

我应该怎么做才能访问每张表？

谢谢。

Answer 1

您的路由器是否有更多的路由分配给它，这些路由遵循相同的模式，在斜杠后面只有一个参数，例如/home？如果是这样的话，vue路由器不知道该做什么，也不显示任何组件。