Passing Params In Router Vue

I’m having a problem. I can’t get it to work.

I have this component called Projet. Inside of it, I have this block of code:

i want when i click in project it will take me to another detailpage but nothing happen:

{path: '/detail/:id', component: detail}

and this the code in my components

        <tr v-for="projet in projets" :key="projet.id" >
           <router-link :to="{ name: 'detail', params: {id:  projet.id } }" style="text-decoration:none; color:black;">        <td>{{ projet.name }}</td></router-link>
                  <td>{{ projet.owner }}</td>
                  <td>{{ projet.durre }}</td>

                  <td>-------</td>
                  <td><i  data-toggle="modal" data-target="#description" class="fas fa-scroll" ></i></td>
                  <td>{{projet.budget}}</td>
                  <td>      <a target="_blank" rel="nofollow noreferrer" href="#" @click="deleteProjet(projet.id)" ><i class="fas fa-trash-alt"></i></a>

I think you missed the router name.

try this

{path: '/detail/:id', component: detail, name: 'detail'}