Vue路由传参实战：为什么我的$router.push() params参数不见了？

Vue路由传参实战：为什么我的$router.push() params参数不见了？

刚接触Vue路由传参时，很多开发者都会遇到一个令人困惑的问题：明明用$router.push()传了params参数，却在目标页面中怎么也取不到。这背后其实隐藏着Vue-router的几个关键设计原则。本文将带你深入理解params传参的机制，避开常见陷阱。

1. 理解Vue-router的两种传参方式

在Vue-router中，参数传递主要有两种方式：params和query。它们看起来相似，但底层实现和适用场景却大不相同。

1.1 params与query的核心区别

特性	params	query
URL可见性	不可见	可见（?后接参数）
参数传递方式	类似POST	类似GET
路由匹配	必须定义在路由配置中	无需预先定义
刷新保留	需要特殊配置	自动保留
适用场景	敏感数据、大数据量	可分享的链接、筛选条件

表：params与query传参的核心差异对比

params传参的最大特点是它不会出现在URL中，这使得它适合传递一些敏感信息或较大的数据对象。但这也带来了一个常见问题：页面刷新后参数会丢失。

<