vue路由传参 query接收

在Vue中，可以使用query传参来进行路由传参和接收参数。传参时，可以使用this.$router.push方法，并在其中指定path和query参数。例如：

this.$router.push({ path: '/deviceInfo', query: { deviceId: '202101075343' } });

在接收参数时，可以使用this.$route.query来获取传递的参数。例如：

let deviceId = this.$route.query.deviceId;

通过这种方式，可以在Vue中进行路由传参和接收参数。[2]

相关问题

vue路由传参query传对象如何接收

你可以通过 $route.query 对象来获取传递的参数。如果传递的参数是对象，可以使用 JSON.stringify() 方法将其转换成字符串，在接收参数的组件中使用 JSON.parse() 方法将其转换回对象。具体地，你可以使用下面的方式来接收传递的对象参数：

// 传递参数的路由链接
<router-link :to="{ path: '/example', query: { foo: 'bar', obj: JSON.stringify({ key: 'value' }) } }">go example</router-link>

// 接收参数的组件
export default {
  mounted() {
    const { foo, obj } = this.$route.query;
    console.log(foo); // 'bar'
    console.log(JSON.parse(obj)); // { key: 'value' }
  }
}

vue路由传参query和params

Vue 路由传参可以使用 query 和 params 两种方式。

1. 使用 query 传参：

query 方式传参是将参数拼接在 URL 后面，以键值对的形式传递，例如：

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

在接收参数的页面，可以通过 `$route.query` 获取参数：

console.log(this.$route.query.id) // 123

2. 使用 params 传参：

params 方式传参是将参数作为路由的一部分，例如：

this.$router.push({ path: '/user/123' })

在声明路由时，需要使用 `:id` 表示参数：

{
  path: '/user/:id',
  component: User
}

在接收参数的页面，可以通过 `$route.params` 获取参数：

console.log(this.$route.params.id) // 123

需要注意的是，params 方式传参需要在路由声明时定义参数的名称和类型，而 query 方式传参则不需要。