在Vue中将组件作为道具路由

问题描述

我想截取传递给路线的数字：

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，但我觉得不用另外扩展就可以做到。

解决方法

通常的模式是使用计算属性，该属性将prop转换为您要用于组件的形式。您还必须更新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) })
}]

javascript vue-props vue.js