基于ID、vue firebase的动态路由问题答案

【问题标题】：Dynamic routing problems based on ID , vue firebase基于ID、vue firebase的动态路由问题
【发布时间】：2020-11-14 06:39:28
【问题描述】：

我有一个导航菜单，其中列出了许多您可以添加或删除工作表的工作表。因此，当我单击一个项目（工作表）时，我想访问它，所以基本上我想访问具有工作表 ID 的路线，以便进行更改。现在我的路线是这样的：

const routes = [
  
  { path: '/:id', name: 'singleSheet', component: singleSheet },
];

在我的 Sheets.vue 中，我有一个 v-for，我在其中列出了我的床单

  <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 没有显示（这应该是因为在我的路线中将它们链接在一起（如您所见）

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

谢谢。

【问题讨论】：

标签： firebase vue.js vuex vuetify.js vue-router

【解决方案1】：

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

【讨论】：

你好，我的路由看起来像这样： const routes = [ { path: '/', name: 'App', component: App, }, { path: '/todo/:index',名称：'singleSheet'，组件：singleSheet }，];