路由器-link 动态 vueJS

Question

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

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

这个 link 所在的我的组件有几个道具，包括文章 ID (actu_id)。

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

我不知道怎么办。

Answer 1

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

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

并且您可以使用模板文字来设置路由器 link 参数

  <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>

路由器-link 动态 vueJS

Router-link dynamic vueJS

vue.js

vue-router

vue-props