vue使用 window.open传参和接受参数

在Vue中使用window.open进行页面跳转并传递参数，可以通过在URL后面拼接参数的方式来实现。例如：

const params = {
  name: 'John',
  age: 30,
  gender: 'male'
}
const url = `http://example.com/?${encodeURIComponent(JSON.stringify(params))}`
window.open(url)

在新打开的页面中，可以使用以下代码来获取传递过来的参数：

const paramsString = window.location.search.substr(1)
const params = JSON.parse(decodeURIComponent(paramsString))
console.log(params.name) // John
console.log(params.age) // 30
console.log(params.gender) // male

其中，`window.location.search`返回URL中的查询字符串（即`?`后面的部分），`substr(1)`去掉查询字符串中的`?`，`decodeURIComponent()`解码查询字符串中的特殊字符，最后通过`JSON.parse()`将查询字符串转化为对象。

相关问题

vue2路由传参怎么接收

在vue2中，路由传参可以使用动态路由和查询参数两种方式。

动态路由传参：

1. 在定义路由时，使用冒号(:)来定义动态参数

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

2. 在组件中使用$route.params来获取动态参数

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

查询参数传参：

1. 在组件中使用$route.query来获取查询参数

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

2. 在路由中使用query来定义查询参数

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      props: (route) => ({ page: route.query.page })
    }
  ]
})

上面的代码中，props可以传递路由参数到组件中，这样组件就可以使用props接收路由参数了。

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]