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

【问题标题】：Dynamic routing in Vue.js, showing `this.$route.params.id` in htmlVue.js 中的动态路由，在 html 中显示 `this.$route.params.id`
【发布时间】：2018-11-23 15:13:15
【问题描述】：

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

我有一个列出所有工作的“工作”页面。您单击一项工作，它会为您提供该工作的详细信息。

Jobs HTML 页面使用以下内容（sn-ps 不包括 ul/li 标签）：

<vue-panel v-for="job in jobs" v-if="filterJob(job)" v-bind:key="job.id">

Job: {{job.title}}<br>
Description: {{job.description}}<br>
Salary: ${{job.salary}}<br>
Date Posted: {{job.datePosted}}<br>

<router-link :to="`/job/${job.id}`">Learn More</router-link>

点击了解更多会转到正确的工作页面。但是我如何动态地显示那个特定的工作呢？

在作业页面中，在我拥有的脚本中：

  created() {
    console.log(this.$route.params.id); // prints value of :id
  },

通过控制台日志，我看到它可以访问正确的作业页面。但它并没有在页面上动态显示一项工作。访问特定作业需要在 HTML 中包含什么内容？

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

<vue-panel v-bind:key="job.id">

Job: {{job.title}}<br>
Description: {{job.description}}<br>
Salary: ${{job.salary}}<br>
Date Posted: {{job.datePosted}}<br>

【问题讨论】：

单个作业页面显示的是什么？一切，还是什么都没有？在您的第二页中，job 变量是如何设置的？
@MikeB., job 页面不显示任何内容。 Jobs 页面准确地显示所有作业的列表，并且正确地重定向到 job/:id 页面。不知道我是否理解你的最后一个问题。 data(): 列出了 job:[] 和 id: ""。这只是job 页面：jsfiddle.net/runningraptor/97nyrvk5/5
job 是空数组？你如何设置这个变量的值？
@ittus，我正在从静态 JSON 文件中读取 jobs 数组。
听起来您已经成功地从路由参数中获取了作业 ID，因此您只需要使用它来设置“作业”数据变量，以便页面可以访问并显示它（ job 应该以对象而不是数组开始）。您可以在 created() 函数中执行此操作，即 this.job = jobs.find(j => j.id == this.$route.params.id); 如果您没有 .find(...) 函数，.filter(...)[0] 应该执行相同的操作。

标签： vue.js

【解决方案1】：

如果你想通过 HTML 访问你必须不绑定键。

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

用vue使用的时候，不能用v-bind as type:

这行得通：

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

这不起作用：

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

所以你必须欺骗通过 vue 传递 :key，或者像你一样，使用 :

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

但它不会出现在 HTML 代码中。

您必须在每个上放置一个 id 并在已安装的部分中创建 key 属性。

【讨论】：

【解决方案2】：

我建立了一个类似的项目并做了以下事情。

router.js：

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

jobs.vue

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

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

【讨论】：