Vue Router传方式详解·里嵌入变量·在路由配置中启用props
Vue Router传递参数的三种方式详解
一、使用路径参数（params）
路径参数就像是在URL里嵌入变量，用起来很直观。
- 在路由配置里定义路径参数，比如 /user/:id。
- 跳转时直接在URL里传递参数，比如 /user/123。
- 在目标组件里通过 this.$route.params.id 来获取参数。
注意：路径参数会直接显示在URL上。
二、使用查询参数（query）
查询参数就像是在URL的问号后面跟着的参数，不直接影响路由。
- 配置路由时不需要特别定义。
- 跳转时在URL后面加上查询参数，比如 /user?id=123。
- 在目标组件里通过 this.$route.query.id 来获取参数。
注意：查询参数不会影响路由匹配，但会显示在URL中。
三、使用props传参
使用props可以让组件更独立，便于测试。
- 在路由配置中启用props。
- 跳转时传递参数。
- 在目标组件中声明props来接收参数。
注意：使用props传参可以避免直接依赖对象，使组件更容易复用和测试。
四、三种传参方式的对比
| 方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 路径参数（params） | 直观反映在URL中，路由匹配清晰 | 需要在路由配置中定义，URL结构可能不够简洁 | 需要在URL中嵌入标识性数据时 |
| 查询参数（query） | 简单易用，不影响路由匹配 | 不够直观，可能影响SEO | 简单过滤条件或非关键性参数 |
| props传参 | 组件独立性强，容易测试 | 需要在路由配置中额外设置 | 需要高复用性和独立性的组件 |
五、实例分析
比如一个电商网站，产品详情页需要传递产品ID，就可以用路径参数来实现。
- 定义产品详情路由：/product/:id。
- 在商品列表中跳转到详情页：/product/123。
- 在产品详情组件中获取产品ID：this.$route.params.id。
六、
Vue Router的传参方式各有特点，选择合适的方法能让开发更高效。根据具体需求选择，同时注意URL的可读性和SEO优化。