前端开发 路由参数：vue获取url携带的参数，vue获取url中的参数方法详解

🔍 关键词：前端开发 | Vue路由参数

📌 核心方法

1. $route.query - 获取URL问号(?)后的参数（如：/page?id=123 → this.$route.query.id）
2. $route.params - 获取动态路由参数（如：/user/:id → this.$route.params.id）
3. useRoute() (Vue 3组合式API) - 替代this.$route，需从vue-router导入

💡 场景示例

• 哈希模式：#/home?tab=settings → $route.query.tab
• 动态路由：/product/:slug → $route.params.slug

⚠️ 注意事项

• 参数为字符串类型，需手动转换数字/布尔值
• 监听参数变化：用watch监听$route对象

🎯 扩展技巧

• 默认值：const id = $route.params.id || 'default'
• 路由配置：用props: true将参数映射为组件属性

✨ 一句话总结：Vue中通过$route轻松解析URL参数，动态路由和查询参数各有妙用！
基于Vue 2/3和vue-router 4.x通用实践，截至2025-08仍适用）