Nuxt.js使用localePath跳转传参时报类型错误如何解决？

错误原因 #

报错核心原因是路由参数类型不匹配：Nuxt.js 底层依赖的 Vue Router 要求路径占位符对应的 params 参数必须为字符串类型，因为 URL 路径片段本身仅支持字符串格式。你当前传入的 orderId 是数字类型，触发了类型校验规则所以抛出错误。

解决方案 #

直接在传参时将数字类型的 orderId 转为字符串即可，修改后的代码如下：

props: {
    idPending: {
      type: Number,
      required: true
    }
},

methods: {
    fetchpage() {
      // 数字转字符串，也可以用模板字符串写法：const orderId = `${this.idPending}`
      const orderId = this.idPending.toString();
      this.$router.push(
        this.localePath({
          name: 'Checkout-Confirmation-orderId', // page with params orderId
          params: { orderId: orderId }
        })
      );
    }
  }

如果需要在目标页面使用数字类型的 orderId，在目标页面接收参数后通过 Number(this.orderId) 转换即可。

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