场景2：Vue Router 中 query 与 params 的区别

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

query 参数

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

javascript 复制代码

/path?query=value

示例：
javascript 复制代码
/user/list?page=2&keyword=vue
跳转方式：
javascript 复制代码
router.push({
  path: '/user/list',
  query: {
    page: 2,
    keyword: 'vue'
  }
})
接收方式：
javascript 复制代码
route.query.page
route.query.keyword

params 参数

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

javascript 复制代码

/path/:id

示例：

路由配置：
javascript 复制代码
{
  path: '/user/:id',
  name: 'userDetail',
  component: UserDetail
}
跳转方式：
javascript 复制代码
router.push({
  name: 'userDetail',
  params: { id: 15 }
})
接收方式：
javascript 复制代码
route.params.id

在编写 params 参数跳转方式时，必须使用 name，而不能使用 path，比如：
javascript 复制代码
// 错误写法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：未定义占位符

javascript 复制代码

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

方法2：定义占位符

javascript 复制代码

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

当我进行跳转时：

javascript 复制代码

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

方法1最终URL：

javascript 复制代码

/user/1

方法2最终URL：

javascript 复制代码

/user

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

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

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