vue路由传参query和params示例

Vue 路由传参有两种方式：query 和 params。

1. query

query 传参方式是通过在路由地址后面拼接参数，例如：

this.$router.push({
  path: '/user',
  query: {
    userId: '123',
    userName: 'Tom'
  }
})

在接收参数的组件中，可以通过 `$route.query` 获取参数：

console.log(this.$route.query.userId) // 输出 123
console.log(this.$route.query.userName) // 输出 Tom

2. params

params 传参方式是通过在路由定义时设置参数，例如：

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

在传参时使用 `$router.push` 方法：

this.$router.push({
  name: 'user',
  params: {
    userId: '123'
  }
})

在接收参数的组件中，可以通过 `$route.params` 获取参数：

console.log(this.$route.params.userId) // 输出 123

注意：params 传参方式只能在路由定义时设置参数，而不能在路由地址中动态拼接参数。