路由组件作为 Vue 中的道具

Question

我想拦截传递给路由的号码：

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

并获取 User 组件中的道具：

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，但我觉得我可以在没有其他扩展名的情况下做同样的事情。

Answer 1

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

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

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

实际上，对于 vue-router，请查看路由定义中的 props function。它应该允许您将路由参数映射到您想要的道具结构中。

我认为这样的方法可行。

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

路由组件作为 Vue 中的道具

Route component as props in Vue

javascript

vue.js

vue-props