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 值了。

vue3 路由传参boolean值

在 Vue3 的路由中传 boolean 值的方法与传其他类型的值是一样的。你可以使用 props 或 query 来传递 boolean 值。

1. 使用 props 传递 boolean 值：

在路由配置中，设置 props 为 true，然后在组件中通过 props 接收：

const routes = [
  {
    path: '/example/:isShow',
    name: 'Example',
    component: Example,
    props: true
  }
]

// 组件中接收
export default {
  props: ['isShow'],
  // ...
}

在使用路由跳转时，直接传递 boolean 值即可：

this.$router.push({ name: 'Example', params: { isShow: true }})

2. 使用 query 传递 boolean 值：

在路由配置中，不需要设置 props，直接在组件中通过 $route.query 接收：

const routes = [
  {
    path: '/example',
    name: 'Example',
    component: Example
  }
]

// 组件中接收
export default {
  // ...
  created() {
    const isShow = this.$route.query.isShow === 'true'
    // ...
  }
}

在使用路由跳转时，需要将 boolean 值转换为字符串：

this.$router.push({ name: 'Example', query: { isShow: true.toString() }})