通常我们需要通过路由携带需要传递的参数,有以下三种写法:
1、地址后面直接带查询参
如果我们只需要传递一个简单的参数,可以采取这种写法,在路由配置中配置查询参,路由跳转时添加查询参
配置如下:

{
  path: '/test/:id',
  name: 'test',
  component: Test
}

跳转如下:

this.$router.push({
  path: `/test/${id}`
})

接收参数:

this.$route.params.id

2、params传参

this.$router.push({
  name: `test`,
  params: {
    a: 1,
    b: 2
  }
})

接收参数:

this.$route.params.a
this.$route.params.b

3、query传参

this.$router.push({
  path: `/test`,
  query: {
    a: 1,
    b: 2
  }
})

接收参数:

this.$route.query.a
this.$route.query.b

query和params传参的时候,每一个参数应该以字符串形式传入,如果传一个对象,会被强制准转换为字符串[object Object],点击进入路由可以获取对象的值,但是刷新页面会导致获取不到对象值。我们可以通过JSON.stringify()解决问题,下面以query为例

//传递参数
let obj = {
  a: 1,
  b: 2
}
this.$router.push({
  path: `/test`,
  query: {
    a: 1,
    obj: JSON.stringify(obj)
  }
})
//接收参数
let a = this.$route.query.a
let obj = JSON.parse(this.$route.query.obj)

params同query

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐