vue router 传参 props

### Vue Router 使用 Props 传参的方法 在 Vue Router 中，可以通过 `props` 将参数传递到目标路由组件中。这种方式允许我们将路由参数映射为组件的属性 (props)，从而更方便地访问这些数据。 #### 配置方法 当定义路由时，在 `routes` 数组中设置 `props: true` 或者自定义一个函数来控制如何将路由参数映射为组件的 props[^1]。以下是两种常见的配置方式： 1. **自动将 params 映射为 props** 如果设置了 `props: true`，那么所有的路由参数 (`params`) 会自动作为同名的 prop 传递给目标组件。 2. **手动指定 props 的映射关系** 可以通过提供一个对象或者函数来自定义参数的映射逻辑。这适用于需要对参数进行额外处理的情况。 --- #### 示例代码 ##### 方法一：使用 `props: true` ```javascript // 定义路由规则 const routes = [ { path: '/user/:id', component: User, props: true // 自动将 params.id 映射为组件的 id 属性 } ]; ``` 在这个例子中，如果访问 `/user/123`，则 `User` 组件将会接收到 `{ id: '123' }` 作为其 props。 ##### 方法二：使用对象形式的手动映射 ```javascript // 定义路由规则 const routes = [ { path: '/product', component: Product, props: { name: 'Default Name', price: 0 } // 手动指定固定的 props 值 } ]; ``` 在这种情况下，无论 URL 如何变化，`Product` 组件都会始终接收相同的默认值作为 props。 ##### 方法三：使用函数形式的动态映射 ```javascript // 定义路由规则 const routes = [ { path: '/search', component: Search, props: (route) => ({ query: route.query.q }) // 动态提取查询参数 q 并将其作为 prop } ]; ``` 这里展示了如何基于当前路由实例 (`route`) 提取特定的数据并转换成组件所需的 props[^2]。 --- #### 在组件内部获取 Props 一旦完成了上述配置，就可以像平常一样在目标组件中声明和使用这些 props。例如： ```vue <template> <div> 用户 ID 是 {{ userId }} </div> </template> <script> export default { props: ['userId'], // 接收父级传递过来的 userId 参数 }; </script> ``` 对于 Vue 3 Composition API 场景下，则可以这样操作[^3]: ```vue <script setup> import { defineProps } from 'vue'; const props = defineProps(['userId']); // 解构出 userId 参数 console.log(props.userId); // 输出从路由中传递来的参数 </script> <template> <p>用户 ID 是 {{ userId }}</p> </template> ``` --- ### 总结 通过以上几种方式，可以在 Vue Router 中灵活地利用 `props` 进行参数传递。无论是简单的静态映射还是复杂的动态计算都可以满足需求。这种方法不仅简化了组件间通信的过程，而且提高了代码可读性和维护性。 ---