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接收

在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

在Vue中，路由传参有两种方式：params和query。params是通过路由路径中的占位符来传递参数，而query则是通过URL查询字符串来传递参数。下面是关于Vue路由传参query的介绍：

1. 在路由路径中添加查询参数

在定义路由规则时，可以在路由路径中添加查询参数，例如：

const routes = [
  {
    path: '/getdata',
    name: 'GetData',
    component: () => import('vs/getData.vue')
  }
]

2. 通过router-link传递查询参数

可以通过router-link组件的to属性来传递查询参数，例如：

<router-link :to="{ name: 'GetData', query: { key1: 'value1', key2: 'value2' } }">Get Data</router-link>

3. 在组件中获取查询参数

在组件中，可以通过$route对象的query属性来获取查询参数，例如：

export default {
  mounted() {
    console.log(this.$route.query.key1)
    console.log(this.$route.query.key2)
  }
}