vue.js - Vue 路由器 : how to cast params as integers instead of strings?

Question

当我使用浏览器字段输入 URL 时，参数被转换为字符串，而不是整数，例如/user/1 返回 {id: "1"}。但是，当使用 this.$route.push({}) 时，参数会正确地转换为整数 {id: 1}。

这种行为是故意的吗？如果没有，我该如何解决？

Answer 1

您必须自己处理任何参数值的转换。在路由对象中定义一个 props 函数。这是一个例子:

{
  path: '/user/:userId',
  component: UserProfile,
  props: (route) => {
    /**
     * This would preserve the other route.params object properties overriding only 
     * `userId` in case it exists with its integer equivalent, or otherwise with 
     * undefined.
     */
    return { ...route.params, ...{ userId: Number.parseInt(route.params.userId, 10) || undefined }
  }
}

link对于 vue router docs，这是在功能模式下