Dynamic routing problems based on ID , vue firebase

Question

I am having a navigation menu where there are listed plenty of sheets you can add or delete a sheet. So when i click one item(sheet) , i want to access it so basically i want to access a route with the sheet ID so i can make changes . Now my route looks like this:

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

Inside my Sheets.vue i got a v-for where i listed my sheets

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

So as you can see there is a router link to the '/'+todo.id when i click on the name of the sheet.

What i get is for example: http://localhost:8080/5ynxSb1El4yPNuBZ4HpK

but my route is not changing so what i mean by that , is that my singleSheet.vue is not showing(which should be since a linked them together in my routes(as you could see)

What should i do so that i can access each sheet ?

Thank you.

Answer 1

Does your router have more routes assigned to it that follow the same pattern with just one argument after the slash such as /home? If so vue-router doesn't know what to do and displays neither of the components.