Vue Router 4中如何通过Props传递Integer类型参数

首先，问题的核心是路由参数默认都是字符串类型——哪怕你在router-link里传的是数字destination.id，最终到路由参数里都会被转成字符串，这就触发了props的类型检查警告。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：在路由配置的props函数中转换类型 #

这是最直接且规范的方式，在路由定义里直接把destinationId转成数字，确保传递给组件的是Number类型：

{
  path: ':exprienceSlug',
  name: 'experience.show',
  component: () => import('../views/PlaceDetails.vue'),
  props: route => ({
    ...route.params,
    // 把字符串格式的参数转为数字
    destinationId: Number(route.params.destinationId)
  }),
},

这样处理后，组件接收的destinationId会完美匹配props的Number类型要求，警告自然就消失了。

方案2：在接收组件内部转换类型 #

如果你不想修改路由配置，也可以在组件里做类型转换，这里提供两种方式：

方法A：用计算属性统一转换 #

在详情页组件里新增一个计算属性，把字符串格式的destinationId转成数字后再使用：

props: {
  destinationId: {
    type: [String, Number], // 先放宽类型限制，允许接收字符串
    required: true,
  },
  exprienceSlug: {
    type: String,
    required: true,
  },
},
computed: {
  parsedDestinationId() {
    return Number(this.destinationId);
  },
  destination(){
    // 使用转换后的数字去匹配数据
    return storeData.destinations.find( destination => destination.id === this.parsedDestinationId )
  },
  experience(){
    return this.destination.experiences.find( experience => experience.slug === this.exprienceSlug )
  }
}

方法B：给props加验证逻辑 #

这种方式需要先放宽props的类型范围，再验证参数是否可以转为有效数字：

props: {
  destinationId: {
    type: [String, Number],
    required: true,
    validator: (value) => {
      // 验证参数是否能转成合法数字
      return !isNaN(Number(value));
    }
  },
  exprienceSlug: {
    type: String,
    required: true,
  },
},

之后在使用destinationId时，记得用Number(this.destinationId)转换后再匹配数据。

方案3：直接修改router-link的参数传递（不推荐） #

虽然你在router-link里传的是数字类型的destination.id，但Vue Router会自动把所有路由参数转成字符串存入URL，所以这种方式无法直接传递数字类型的参数，不推荐尝试。

另外注意你的代码里有个拼写小错误：exprienceSlug应该是experienceSlug（少了一个字母'e'），虽然不影响功能，但建议修正，避免后续维护时的混淆。

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