路由组件传参 ​

在子路由中，你可以使用路由表中的 props 配置来自动解析参数，而无需手动获取参数。这种方式可以取代传统的手动获取参数的方式。但需要注意的是，这种自动解析参数的功能只适用于子路由，不适用于顶级页面。

布尔模式 ​

当你在路由表中将 props 设置为 true 时，route.params 将会自动设置为组件的 props。

具体地说，当路由匹配到具有 props: true 配置的子路由时，route.params 中的参数将会自动注入到组件的 props 中。这样，你就可以直接在组件中访问这些参数，而无需手动从 route.params 中获取。

例如，假设你的路由配置如下：

/**
 * 该演示路由为子路由表
 * 为简化示例，移除了父级路由
 */
const routes = [
  {
    path: 'user/:id',
    component: UserComponent,
    props: true,  
  }
]

在 UserComponent 组件中，你可以直接访问 id 参数，它会自动作为组件的 props：

// UserComponent.vue
export default {
  props: ['id'],
  // ...
}

通过这种方式，你可以更方便地在组件中使用路由参数，而不需要手动从 route.params 中提取。

命名视图 ​

对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

/**
 * 该演示路由为子路由表
 * 为简化示例，移除了父级路由
 */
const routes = [
  {
    path: 'user/:id',
    components: { 
      default: User, 
      sidebar: Sidebar 
    },
    props: { 
      // 开启自动解析模式
      default: true, 
      // 不开启自动解析模式
      sidebar: false 
    }
  }
]

函数模式 ​

你可以创建一个返回 props 的函数来对参数进行转换、结合静态值和基于路由的值等操作。

通过在路由表中配置一个返回 props 的函数，你可以对参数进行自定义处理，并将处理后的值注入到组件的 props 中。这样，你可以灵活地转换参数的类型、结合其他静态值，以及基于路由的值来设置组件的 props。

例如，假设你的路由配置如下：

/**
 * 该演示路由为子路由表
 * 为简化示例，移除了父级路由
 */
const routes = [
  {
    path: 'user/:id',
    component: UserComponent,
    props: route => ({
      id: parseInt(route.params.id),
      role: 'admin',
      isMobile: window.innerWidth < 768
    })
  }
]

在上述示例中，我们定义了一个返回 props 的函数。该函数接收 route 参数，其中包含路由相关的信息。我们可以利用这个函数来转换 id 参数为整数类型，并结合静态值 role 和基于路由的值 isMobile，最终将它们作为 props 注入到 UserComponent 组件。

// UserComponent.vue
export default {
  props: ['id', 'role', 'isMobile'],
  // ...
}

通过这种方式，你可以灵活地处理参数，并根据需要将它们转换为其他类型或结合其他值，以满足组件的需求。