路由组件作为 Vue 中的道具

【问题标题】：Route component as props in Vue路由组件作为 Vue 中的道具
【发布时间】：2021-01-12 14:58:18
【问题描述】：

我想截取一个传递给路由的数字：

routes: [{ path: '/user/:id', component: User }]

并获取User组件中的prop：

export default {
    props: {
       id: Number
    }
}

很遗憾，我收到了这个错误：

Invalid prop: type check failed for prop "id". Expected Number with value 2, got 
String with value "2".

有没有办法将值强制转换为数字？我查看了https://github.com/posva/vue-coerce-props，但我觉得无需其他扩展也可以做到这一点。

【问题讨论】：

标签： javascript vue.js vue-props

【解决方案1】：

通常的模式是使用计算属性，它将道具转换为您希望用于组件的形式。您还必须更新道具定义以允许字符串和数字。

export default {
    props: {
        id: {
            validator(value) {
                return !isNaN(parseInt(propVal));
            }
        }
    },
    computed: {
        parsedId() { 
            return parseInt(this.id); 
        }   
    }
}

然后在您的其余代码中，您将使用parsedId 而不是id，这无疑是不理想的。有一个 open RFC 可以解决这个问题，它允许您为 props 定义单独的内部和外部名称。

其实对于vue-router，看一下你路由定义中的props function。它应该允许您将路线参数映射到您想要的道具结构中。

我认为这样的事情会奏效。

routes: [{ 
    path: '/user/:id', 
    component: User,
    props: route => ({ id: parseInt(route.params.id) })
}]

【讨论】：