vue3 路由传参boolean值 ts 报错
时间: 2023-06-29 18:20:29 浏览: 117
如果在 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 值了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)