Vue Router结合router-link传递props的实现疑难

核心问题原因 #

控制台警告的本质是：Vue Router 规定，使用path跳转时，params参数会被直接忽略，必须改用命名路由来传递params。

调整步骤 #

1. 修正router-link跳转逻辑

把原有的path跳转改为使用路由名称（name: 'aboba'），同时在params中传入所需参数：

<router-link
  :to="{
    name: 'aboba', // 改用路由名称，而非直接写path
    params: {
      id: announsment.id, // 对应路由配置里的动态参数:id
      announsment: announsment // 传递完整广告对象
    },
  }"
  class="text-decoration-none link-primary"
>
  {{ announsment.title }} <!-- 模板中直接用props变量，无需加this. -->
</router-link>

2. 优化路由配置的props传递

你的路由已设置props: true，但默认仅会把路由动态参数（如id）作为props传递。若要让完整的announsment对象也能作为props传入详情页，需将props改为函数模式：

{
  path: "/announsment/:id",
  name: "aboba",
  component: AnnounsmentPage,
  // 通过函数返回props，同时获取路由params中的所有参数
  props: route => ({
    id: route.params.id,
    announsment: route.params.announsment
  })
}

3. 详情页接收props

在AnnounsmentPage组件中定义对应的props：

export default {
  name: "AnnounsmentPage",
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    announsment: {
      type: Object,
      required: true
    }
  }
}

关于命名路由的动态路径 #

你的路由配置/announsment/:id已经正确设置了动态路径，其中:id就是动态参数占位符。使用命名路由时，只需在params中传入对应的id值，Vue Router会自动将其拼接成实际路径（如/announsment/12），无需手动拼接字符串。

更稳定的传参方案（推荐） #

直接传递完整对象的方式存在缺陷：用户刷新详情页时，params中的对象会因序列化丢失。更可靠的做法是仅传递id，详情页通过id重新请求数据：

1. 简化router-link：

<router-link
  :to="{
    name: 'aboba',
    params: { id: announsment.id }
  }"
  class="text-decoration-none link-primary"
>
  {{ announsment.title }}
</router-link>

2. 详情页通过id请求数据：

export default {
  name: "AnnounsmentPage",
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      announsment: null
    }
  },
  async created() {
    // 调用接口根据id获取详情
    const res = await this.$axios.get(`/api/announsment/${this.id}`);
    this.announsment = res.data;
  }
}

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