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 路由传参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中的RouteRecordRaw

Vue3中的RouteRecordRaw是一个用于描述路由配置的接口类型。它定义了一个路由记录的基本结构，包含了路由路径、路由组件、路由元数据等属性。

一个RouteRecordRaw对象的基本结构如下：

interface RouteRecordRaw {
  path: string;
  name?: string;
  component?: Component;
  components?: Record<string, Component>;
  redirect?: string | Location | Function;
  alias?: string | string[];
  children?: RouteRecordRaw[];
  meta?: any;
  beforeEnter?: NavigationGuard;
  props?: boolean | Object | RoutePropsFunction;
  caseSensitive?: boolean;
  pathToRegexpOptions?: PathToRegexpOptions;
}

其中各属性的含义如下：

- path：路由路径，可以是一个字符串或一个正则表达式。
- name：路由名称，用于在程序中唯一识别一个路由。
- component：路由组件，可以是一个组件对象或组件异步加载函数。
- components：命名视图组件对象，用于定义多个命名视图。
- redirect：重定向路由，可以是一个字符串、一个Location对象或一个函数。
- alias：路由别名，可以是一个字符串或一个字符串数组。
- children：子路由记录数组，用于定义嵌套路由。
- meta：路由元数据，用于保存一些附加信息。
- beforeEnter：路由独享的导航守卫，用于在进入路由前执行一些操作。
- props：路由组件的props属性，可以是一个布尔值、一个对象或一个函数。
- caseSensitive：路径是否大小写敏感，默认为false。
- pathToRegexpOptions：路径转正则表达式的选项。

RouteRecordRaw对象用于描述路由配置，可以用于创建路由实例或生成路由匹配规则。在Vue3中，我们可以使用createRouter函数创建一个路由实例，例如：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在上面的代码中，我们定义了一个名为routes的数组，数组中包含两个RouteRecordRaw对象分别表示根路由和/about路由。然后我们使用createRouter函数创建了一个路由实例，并传入了路由配置。最后将路由实例导出，以供其他组件使用。