在 Vue Router 中，query 和 params 都是我们常用的路由传参方式，对于他们的使用大家都不陌生，但在日常开发者有一些需要注意的点。

query 参数

• 在路由配置中不需要声明
• 刷新页面后参数继续存在（*重点*）
• URL 格式：

/path?query=value

示例：

/user/list?page=2&keyword=vue

• 跳转方式：

router.push({
  path: '/user/list',
  query: {
    page: 2,
    keyword: 'vue'
  }
})

• 接收方式：

route.query.page
route.query.keyword

params 参数

• 在路由配置中需要声明
• 刷新页面后参数可能丢失（*重点*）
• URL 格式：

/path/:id

示例：

• 路由配置：

{
  path: '/user/:id',
  name: 'userDetail',
  component: UserDetail
}

• 跳转方式：

router.push({
  name: 'userDetail',
  params: { id: 15 }
})

• 接收方式：

route.params.id

 在编写 params 参数跳转方式时，必须使用 name，而不能使用 path，比如：

// 错误写法1
router.push({
  path: '/user',
  params: { id: 1 }
})

// 错误写法2
router.push({
  path: '/user/:id',
  params: { id: 1 }
})

// 正确写法
router.push({
  name: 'userDetail',
  params: { id: 1 }
})

为什么 params 在刷新页面后会丢失？

这取决于我们在路由配置时的声明方式：

• 方法1：未定义占位符

{ path: '/user', name: 'userDetail', component: xxx }

• 方法2：定义占位符

{ path: '/user/:id', name: 'userDetail', component: xxx }

• 当我进行跳转时：

router.push({ name: 'userDetail', params: { id: 1 } })

• 方法1最终URL：

/user/1

• 方法2最终URL：

/user

定义了占位符的方法2不会丢失 params，因为 :id 已经包含在 URL 中；

如果使用方法1，params 是存在于 路由对象内存 中，URL 中没有 params，刷新页面后路由无法恢复之前的 params 从而导致丢失。

因此，params 是否丢失的关键在：是否写入 URL。我们可以使用 params + 占位符 的方式，也可以使用 query 方式。