vue3 路由传参boolean值 ts 报错
时间: 2023-06-29 22:20:29 浏览: 157
如果在 TypeScript 中使用 Vue3 的路由传递 boolean 值,会出现类型不匹配的报错。这是因为 TypeScript 默认将 boolean 值解析为 true 或 false 字符串,与我们实际需要的 boolean 值不一致。
解决方法是在路由配置中设置 props 的类型为 any,这样就可以接收任何类型的参数,包括 boolean 值。示例如下:
```typescript
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 值的代码不需要修改,可以直接使用。
```typescript
import { defineComponent } from 'vue'
export default defineComponent({
props: {
isShow: {
type: Boolean,
required: true
}
},
// ...
})
```
这样就可以在 TypeScript 中正确地传递和接收 boolean 值了。
阅读全文