Vue路由可选参数传递组件Prop时为空串而非默认值求助

问题根源：当路由配置props: true时，即使可选参数clientId未在URL中提供，Vue Router仍会将其作为空字符串""传递给组件props，直接覆盖了你定义的默认值"0"。

以下是两种可行的解决方法：

方法一：通过路由props函数自定义参数传递 #

修改router.js中的路由配置，将props: true替换为自定义函数，在路由层处理默认值逻辑：

{
  path: "/new-services-request/:clientId?",
  name: "NewServicesRequest",
  component: () => import("../views/ServicesRequest/NewServicesRequest.vue"),
  props: route => ({
    clientId: route.params.clientId ?? "0"
  })
},

此时组件的props定义可以保留原样，也可以简化（因为默认值已由路由处理）。

方法二：在组件内处理参数值 #

保持路由的props: true配置不变，在组件内通过计算逻辑将空字符串替换为默认值：

<script setup>
const props = defineProps({
  clientId: {
    type: String,
    required: false,
    default: "0"
  }
});

// 使用处理后的值替代原props
const clientId = props.clientId || "0";
</script>

后续在组件模板或逻辑中直接使用clientId即可。

推荐使用方法一，路由层处理参数默认值更符合职责分离原则，组件无需关心路由参数的传递细节。

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