带有布尔查询参数的 Vue Router

Question

问题：我有一个组件，它需要一个布尔值作为从视图应用程序内部和外部应用程序调用的一部分可选地传递给它。当我直接调用路由器时，我可以毫无问题地传递布尔值，但如果我使用实际 URL 进行路由，则会收到解析警告。为了防止出现警告，我应该使用字符串并自己解析吗？

路由器：

export default new Router({
  routes: [
    {
      path: '/foo',
      name: 'Foo',
      component: Foo,
      props: (route) => ({ booleanParam: route.query.booleanParam })
    }
  ]
})

成分：

<template>
    <div>
        BooleanParam: {{booleanParam}}
    </div>
</template>

<script>
export default {
    name: 'Foo',
    props: {
        booleanParam: {
            type: Boolean,
            required: false
        }
    }
}
</script>

作品：

router.push( { name: 'Foo', query: { booleanParam: true } })

产生警告：

http://localhost:8080/foo?booleanParam=true

警告：

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

Answer 1

如果组件需要布尔值，则在将其设置为 prop 之前将该值解析为布尔值：

props: (route) => ({ booleanParam: (route.query.booleanParam === 'true') })

这样可以确保正确的类型。

编辑： 正如 OP 支持 String 和 Boolean 的评论中所述，可以将参数转换为 String 以确保两种类型都可以工作：

props: (route) => ({ booleanParam: (String(route.query.booleanParam). toLowerCase() === 'true') })