VueJS如何为router-link的params动态绑定props传入的actu_id参数

你只需要直接在v-bind绑定的:to表达式中引用组件已声明的actu_id prop即可，:to绑定的属性值默认处于组件的作用域上下文内，可以直接访问所有组件暴露的属性（包括props、data、computed等）。

修改后的代码如下：

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

注意事项 #

• 需提前在组件内正确声明actu_id prop，避免拼写错误：
  选项式API示例：

  export default {
    props: {
      actu_id: {
        type: Number,
        required: true
      },
      // 其余props声明
    }
  }
  

  组合式API <script setup>示例：

  const props = defineProps({
    actu_id: {
      type: Number,
      required: true
    },
    // 其余props声明
  })
  

• 确认路由配置中Blog Details命名路由已正确定义id参数，避免参数传递失效。

内容的提问来源于stack exchange，提问作者chpe1