vue路由传参query和params

在 Vue.js 中，路由传参主要有两种方式: query 和 params。

- query: 在 URL 中使用 ?key=value 的形式传递参数，可以在组件中通过 $route.query 来访问。

- params: 在 URL 中使用 /:key 的形式传递参数，可以在组件中通过 $route.params 来访问。

如果需要在跳转路由时传参可以使用

this.$router.push({ path: '/new', query: { q: '123' }});

访问参数

this.$route.query.q

如果使用params，
跳转

this.$router.push({ path: '/new', params: { id: 123 } });

访问参数

this.$route.params.id

相关问题

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 传参方式只能在路由定义时设置参数，而不能在路由地址中动态拼接参数。

vue路由传参query和params的区别

Vue路由传参中，query和params的区别如下：

1. query传参是通过URL中的查询字符串传递参数，而params传参是通过URL中的路径参数传递参数。

2. query传参可以传递任意类型的数据，而params传参只能传递字符串类型的数据。

3. query传参不会改变URL的路径，而params传参会改变URL的路径。

4. query传参可以在路由跳转时保留参数，而params传参在路由跳转时不会保留参数。

5. query传参可以在同一路由下多次传递参数，而params传参只能在同一路由下传递一次参数。

综上所述，query和params的区别在于传参方式、数据类型、URL路径、参数保留和传递次数等方面。根据具体需求选择合适的传参方式。