时间戳

首页 > 解决方案 > 来自路由器参数的无效道具类型，预期数字得到字符串

vuejs2 - 来自路由器参数的无效道具类型，预期数字得到字符串

问题描述

我正在尝试id从 URL 收集价值。

以前我在这篇文章中寻求帮助。

在我index.js的路由器文件中，我有以下代码：

{   path: '/word/:id',
    name: 'word',   
    component: Word,
    props: true,
},

在我的组件中，我有以下代码：

<script>
    export default {
        props: {
             id: Number,
        },
        created() {
             this.routeChanged();
        },
        watch: {
            'id': 'routeChanged',
        },
        methods: {
            routeChanged () {
                console.log(this.id);
            },
        },
    };
</script>

我收到以下错误：

[Vue 警告]：无效的道具：道具“id”的类型检查失败。预期数字，得到字符串。

标签： vuejs2vue-router

解决方案

这就是使用Function mode将 Props 传递给路由组件的用例：

您可以创建一个返回道具的函数。这允许您将参数转换为其他类型，将静态值与基于路由的值组合等。

props: true在您的情况下，您可以将一个函数传递给该选项，而不是使用 指定路由props选项：

routes = [{
  path: '/word/:id',
  component: Word,
  props: castRouteParams
}];

function castRouteParams(route) {
  return {
    id: Number(route.params.id),
  };
}

现场示例：https ://codesandbox.io/s/8kyyw9w26l （点击“Go to Test/3”链接）

推荐阅读