Javascript 带布尔查询参数的Vue路由器

问题：我有一个组件需要一个布尔值作为调用的一部分从视图应用程序和外部应用程序中选择性地传递给它。当我直接调用路由器时，我可以毫无问题地传递布尔值，但是如果我使用实际的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>

生成警告：

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

警告:

[Vue warn]：无效的属性：属性“booleanParam”的类型检查失败。 应为布尔值，但得到字符串

你尝过这个吗

   const router = new VueRouter({
      routes: [
        { 
        path: '/foo',
        name:"Foo"
        component: Foo, props: (route) => ({ query: route.query.q }) }
      ]
    })

    OR

    {path:'/foo/:booleanParam', name:'Foo', component: Foo  }

---

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

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

这样可以确保正确的类型

---

编辑： 正如OP在支持String和Boolean的注释中所述，可以将参数转换为String，以确保这两种类型都有效：

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

---

我想第一部分是我在上面的问题中得到的。由于参数是可选的foo/：boolean param对我的用例不起作用，因此使用query param。对此有一个警告，如果要使用boolean参数执行router.push，则应执行以下操作以支持两个路径：props:（route）=>（{booleanParam:（route.query.booleanParam=='true'| | route.query.booleanParam===true）}

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