vue3 动态路由 props 配置默认值

在 Vue 3 中，你可以通过使用路由的 `props` 配置来设置动态路由的默认值。你可以在路由配置中使用 `props` 字段来定义默认的 props 值。下面是一个示例：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: (route) => ({
      id: route.params.id || 'defaultId'
    })
  }
]

在这个例子中，我们定义了一个动态路由 `/user/:id`，并且使用 `props` 函数来设置默认的 props 值。`props` 函数会接收到当前路由对象作为参数，你可以在函数内部根据需要进行处理。

在上面的示例中，我们使用 `route.params.id` 来获取动态路由的参数值，并且使用逻辑或运算符 `||` 来设置默认值为 `'defaultId'`。如果路由参数中有 `id` 参数，那么将使用传递的参数值；否则将使用默认值 `'defaultId'`。

这样，当你访问 `/user/123` 路径时，组件 `User` 将会接收到一个名为 `id` 的 prop，其值为 `'123'`。当访问 `/user/` 路径时，组件 `User` 将会接收到一个名为 `id` 的 prop，其值为 `'defaultId'`。

相关问题

vue3项目路由传参

在Vue3项目中，路由传参可以通过不同的方式进行设置。以下是常见的两种方式：

1. **查询参数（query）**[^1]:

   // 在路由配置中添加动态路径参数
   { path: '/path/:param1/:param2', 
     component: SomeComponent,
     props: true, // 默认情况下，组件会接收来自父路由的全部prop，如果不需要，可以设置为true
     params: {
       // 这里可以直接访问params，如 this.$route.params.param1 和 this.$route.params.param2
     },
     query: {
       // 查询参数可以通过this.$route.query访问，如 this.$route.query.key1 和 this.$route.query.key2
     }
   }

   // 当前路由访问时，可以通过动态参数和查询参数的形式传递参数
   router.push({ name: 'someRoute', params: { param1: 'value1', param2: 'value2'}, query: { key1: 'value3' } });

2. **路径参数（params）**:
- 在`router.push`或`router.go`中，通过`params`对象传递参数：

   router.push({ name: 'someRoute', params: { key: 'value' } });

在组件内，可以通过`this.$route.params`来访问这些参数。

3. **props选项**[^2]：
如果你希望子组件直接接收路由参数，可以在路由规则中定义一个`props`函数：

   { 
     path: '/path/:customProp',
     component: CustomComponent,
     props: (route) => ({ customProp: route.params.customProp }) // 接收自定义属性
   }

在`CustomComponent`内部，你可以直接访问`this.customProp`。

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