路由器链接动态 vueJS

【问题标题】：Router-link dynamic vueJS路由器链接动态 vueJS
【发布时间】：2021-10-02 19:48:33
【问题描述】：

我是 vueJS 的新手。我正在创建一个新闻系统来训练自己。我有点小问题。这是允许我转到文章详细信息的链接：

<router-link :to="{ name: 'Blog Details', params: { id: 1 }}"><img v-bind:src="postThumbnail" v-bind:alt="title"></router-link>

此链接所在的我的组件有几个道具，包括文章 id (actu_id)。

在文章的链接中，我希望位于参数中的 id 不是硬“1”，而是 actu_id。

我不知道该怎么做。

【问题讨论】：

标签： vue.js vue-router vue-props

【解决方案1】：

在构建这样的东西时，首先要考虑数据是如何到达您的页面的。假设您将有多个博客文章，在这里使用循环可能是最有效的。将它们保存在数组中的数据中：

    blogs: [
      {
        name: "Post 1",
        id: 1,
        thumbnail: "agsrgsghr.jpg",
      },
      {
        name: "Post 2",
        id: 2,
        thumbnail: "agsrgsghr2.jpg",
      },
    ],

您可以使用模板文字来设置路由器链接参数

  <div v-for="blog in blogs" :key="blog.id">
      <router-link :to="{ name: `${blog.name}`, params: { id: `${blog.id}` } }"
        ><img :src="blog.thumbnail" :alt="blog.name"
      /></router-link>
    </div>

【讨论】：

非常感谢。正是这种语法，我再也找不到了：`${blog.id}` 这是为循环而注明的。这是我打算做的。 1000 感谢您的帮助。