Vue.js中的动态路由，在html中显示'this.$route.params.id'

我有一个使用动态路由的页面

我有一个列出所有工作的“工作”页面。单击一个作业后，它会显示该作业的详细信息

作业HTML页面使用以下内容（代码段不包括ul/li标记）：

通过控制台日志，我看到它可以访问正确的作业页面。但它不会在页面上动态显示一个作业。要访问特定作业，HTML中需要包含哪些内容

作业页面的HTML，截至目前（不包括ul/li标签）：

作业：{{Job.title}}

描述：{{job.Description}}

工资：${{job.Salary}}

发布日期：{job.datePosted}}

如果您想通过HTML访问，您必须不绑定密钥

mounted(){
        document.getElementById("H1").setAttribute("key", this.$route.params.id);
        console.log('alex : ',document.getElementById("H1"));
      }

通过vue使用时，不能通过v-bind作为类型：

这项工作：

 <div :type="$route.params.id">Verticals Statistics</div>

垂直统计

这不起作用：

 <div :key="$route.params.id">Verticals Statistics</div>

垂直统计

因此，您必须通过vue传递：密钥，或者像您所做的那样，通过以下方式传递：密钥：

<div v-for='id in [$route.params.id]' :key="id">Verticals Statistics</div>

垂直统计

但它不会出现在HTML代码中

---

您必须在每个部件上放置一个id，并在安装的部件中创建键属性。

我构建了一个类似的项目，并执行了以下操作

router.js：

{
  path: '/jobs/:id',
  name: 'JobSingle',
  component: JobSingle
}

jobs.vue

<router-link :to="{name:'JobSingle', params:{id:job._id}}">
  {{ job.title }}
</router-link>

{{job.title}

---

有关更多问题，您可以在这里查看我的项目：github.com/markusdanek/t2w vue

单个作业页面显示什么？什么都有，还是什么都没有？在第二个页面中，

job

变量是如何设置的？@MikeB.，

job

页面不显示任何内容<代码>作业页面显示所有作业的列表，并正确重定向到

作业/：id

页面。不知道我是否理解你的最后一个问题

data（）：

已列出

job:[]

和

id:

。这里只是

作业

页面：

作业

是空数组吗？如何设置此变量的值？@ittus，我正在从静态JSON文件读取

jobs

数组。听起来您成功地从路由参数获取了作业ID，因此您只需使用它设置“job”数据变量，以便页面可以访问并显示它（

job

可能应该以对象而不是数组开始）。您可以在创建的（）函数中执行此操作，即

this.job=jobs.find（j=>j.id==this.$route.params.id）；

如果您没有

.find（…）

函数，

过滤器（…）[0]

也应该执行相同的操作。

<div v-for='id in [$route.params.id]' :key="id">Verticals Statistics</div>

{
  path: '/jobs/:id',
  name: 'JobSingle',
  component: JobSingle
}

<router-link :to="{name:'JobSingle', params:{id:job._id}}">
  {{ job.title }}
</router-link>