具有布尔查询参数的Vue路由器

时间:2018-03-14 17:21:56

标签: javascript vue.js vue-router

问题:我有一个组件需要一个布尔值,可以选择在视图应用程序和外部应用程序中作为调用的一部分传递给它。当我直接调用路由器时,我可以传递布尔值没有问题,但如果我使用实际的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”,类型检查失败。   预期布尔值,得到字符串。

2 个答案:

答案 0 :(得分:1)

如果组件需要布尔值,则在将此值设置为prop之前将该值解析为布尔值:

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

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

修改 正如OP在注释中指出的那样,支持String和Boolean,参数可以转换为String以确保两种类型都有效:

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

答案 1 :(得分:0)

你试试这个

吗?
>>> from sklearn.model_selection import ParameterGrid

>>> pg = ParameterGrid(param_grid)
>>> len(pg)
81