在Vue项目中，路由参数传递是常见需求。掌握多种传参方式可以让你更灵活地处理数据交互。以下是几种常用的路由传参方法：

📚 第一种：通过路径传参

这是最基础的方式，直接在路径中定义参数。例如：`/user/:id`，然后在组件中通过 `this.$route.params.id` 获取值。这种方式简单直观，适合固定参数结构的场景。

📝 第二种：查询参数（Query）

使用 `?key=value` 的形式，比如 `/search?query=vue`。这种参数可以通过 `this.$route.query.query` 获取，适合需要动态拼接或隐藏参数的场景。

💼 第三种：编程式导航传参

利用 `router.push()` 方法，可以直接携带参数，例如 `{ path: '/user', query: { id: 123 } }`。这种方式适合需要动态跳转时携带数据的场景。

💡 第四种：子路由传参

当涉及嵌套路由时，可以在父路由中传递参数到子路由。例如，`{ path: 'parent/:parentId/child', component: Child }`，子组件可通过 `this.$route.params.parentId` 获取父级参数。

掌握这些技巧后，你会发现Vue路由变得得心应手！💪

Vue 前端开发 路由传参 子路由