在路由器vue中传递参数

Posted 2023-02-23

【中文标题】在路由器vue中传递参数

【英文标题】：Passing params in router vue

【发布时间】：2020-06-13 21:44:29

【问题描述】：

我遇到了问题。我无法让它工作。

我有一个名为 Projet 的组件。在其中，我有这段代码：

我想当我点击项目时它会带我到另一个详细信息页面 但什么也没发生：

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

这是我组件中的代码

        <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 href="#" @click="deleteProjet(projet.id)" ><i class="fas fa-trash-alt"></i></a>

【参考方案1】：

试试这个：

<router-link :to="'detail/' + projet.id" style="text-decoration:none; color:black;">     

【参考方案2】：

我想你错过了路由器名称。

试试这个

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

【讨论】：

然后记录你的项目@anis

project.id 工作他带我到其他页面，但新页面的 url 中没有 id

如果 projet.id 未找到，那么它将显示未定义。你将重定向到 /detail/undefined 页面

127.0.0.1:8000/… 带我到这个网址

你的模板没有编译，检查 vue 实例，vue 文件。并在您的控制台日志中查看