Vue Router 中如何获取路由传递过来的参数？：一文掌握 Params、Query 与 State 传参技巧

1. Vue Router 中如何获取路由传递过来的参数一文掌握 Params、Query 与 State 传参技巧在前端开发中组件间的数据流转非常常见。Vue Router 作为 Vue.js 的官方路由管理器提供了多种方式来实现页面间的参数传递。本文将深入探讨如何获取路由中传递过来的参数包括通过 URL 查询字符串传递、通过动态路由传递以及通过状态传递的方式。1.1 传参流程图在开始代码演示之前我们可以通过以下流程图来理解整个路由传参与获取的逻辑过程定义路由规则配置路由组件通过声明式导航跳转通过编程式导航跳转传递参数对象目标组件中接收参数通过 $route 对象获取业务逻辑处理2. Query 参数传参方式Query 方式通过 URL 的查询字符串来传递参数例如/user?id1nametest。这种方式非常适合需要保留参数以便用户刷新页面或分享链接的场景。2.1 路由跳转使用router.push或router-link :to...时可以传递一个对象其中包含query属性。// 编程式导航 this.$router.push({ path: /user, query: { id: 123, username: admin } }); // 结果是 /user?id123usernameadmin在router-link中使用router-link to/user?id123nametest用户详情/router-link2.2 在组件中获取参数在目标组件的created或mounted钩子中通过this.$route.query访问参数。export default { created() { console.log(this.$route.query.id); console.log(this.$route.query.username); // 输出: 123, admin } }3. Params 参数传参方式Params 方式通过 URL 的路径部分传递参数例如/user/123。这种方式通常用于动态路由更符合 RESTful API 的设计风格。3.1 定义动态路由首先必须在路由配置中定义动态参数如:id。// router/index.js const routes [ { path: /user/:id, name: UserDetail, component: () import(/views/UserDetail.vue) } ]3.2 路由跳转跳转时必须通过name属性配合 params 来传参使用path无法传递 params。this.$router.push({ name: UserDetail, params: { id: 456, role: editor } }); // 结果是 /user/4563.3 在组件中获取参数同样在组件中通过this.$route.params获取。export default { created() { console.log(this.$route.params.id); // 输出: 456 console.log(this.$route.params.role); // 输出: editor } }注意在使用params时如果刷新页面路由可能会丢失参数取决于浏览器历史记录的行为建议将其保存在 Vuex 或 Pinia 中。4. State 参数传参方式State 是 Vue Router 4.x 引入的特性参数保存在浏览器的 history 状态中不会出现在 URL 链接上。这种方式非常适合传递非敏感数据或复杂数据结构。4.1 路由跳转this.$router.push({ path: /admin, state: { token: encrypted-token-string, permissions: [read, write] } });4.2 在组件中获取参数参数通过this.$route.state获取但有个前提条件目标组件必须在keep-alive缓存中或者从不同的路由栈跳转过来。export default { created() { if (this.$route.state this.$route.state.token) { this.initAdmin(this.$route.state); } else { this.$router.push(/login); } } }5. 总结获取路由参数的核心在于理解this.$route对象的三个属性query通过 URL 查询字符串传递刷新不丢失用于搜索、筛选等场景。params通过 URL 路径传递适合动态路由但刷新可能丢失需配合name跳转。state不展示在 URL 中保存在状态栈里适合敏感数据或复杂数据但获取受限于组件生命周期和缓存机制。掌握这三种方式可以让你在 Vue Router 的开发中游刃有余。