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() }})