vue3 路由传参boolean值 ts 报错 设置了路由的props还是报错

可以尝试在定义路由时，使用props解构的方式来传递参数，示例代码如下：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/example',
    name: 'Example',
    component: ExampleComponent,
    props: route => ({ boolProp: Boolean(route.query.boolProp) })
  }
]

interface ExampleProps {
  boolProp: boolean
}

const ExampleComponent: defineComponent<ExampleProps> = (props: ExampleProps) => {
  // your component logic
}

在这个示例中，我们使用了`props`选项来定义路由的props。在这里，我们使用了一个函数，通过解构`route.query.boolProp`来传递布尔值参数。同时，我们还定义了一个`ExampleProps`接口，来明确`ExampleComponent`组件所需要的props类型。

这样设置后，在组件内部就可以使用`props.boolProp`来访问传递的布尔值参数了。

相关问题

vue3 路由传参boolean值 ts 报错

如果在 TypeScript 中使用 Vue3 的路由传递 boolean 值，会出现类型不匹配的报错。这是因为 TypeScript 默认将 boolean 值解析为 true 或 false 字符串，与我们实际需要的 boolean 值不一致。

解决方法是在路由配置中设置 props 的类型为 any，这样就可以接收任何类型的参数，包括 boolean 值。示例如下：

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/example/:isShow',
    name: 'Example',
    component: Example,
    props: (route) => ({
      isShow: route.params.isShow === 'true'
    } as any)
  }
]

在组件中接收 boolean 值的代码不需要修改，可以直接使用。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  // ...
})

这样就可以在 TypeScript 中正确地传递和接收 boolean 值了。