问题:我有一个组件需要一个可选的 bool 值作为 View 应用程序内部和外部应用程序调用的一部分传递给它。当我直接调用路由器时,我可以毫无问题地传递 bool 值,但如果我使用实际 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 warn]: Invalid prop: type check failed for prop "booleanParam". Expected Boolean, got String.
最佳答案
如果组件需要 bool 值,则在将其设置为 prop 之前将值解析为 bool 值:
props: (route) => ({ booleanParam: (route.query.booleanParam === 'true') })
这样可以确保正确的类型。
编辑: 正如 OP 在支持 String 和 Boolean 的评论中指出的那样,可以将参数转换为 String 以确保这两种类型都有效:
props: (route) => ({ booleanParam: (String(route.query.booleanParam). toLowerCase() === 'true') })
关于javascript - 具有 bool 查询参数的 Vue 路由器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49284057/