vue3.0 router路由跳转传参问题(router.push)

下面我详细讲解一下"Vue3.0 Router路由跳转传参问题(router.push)"的完整攻略。

1. 问题

在Vue3.0中使用Router进行路由跳转时，需要传递参数，但是参数传递的方式有很多，如何选择最合适的方式呢？

2. 解决方案

Vue3.0中使用Router进行路由跳转时，可以使用以下几种方式进行参数传递。

2.1 Query参数传递

使用Query参数传递可以像传统的URL传参一样将参数传递给后端服务。

router.push({
  path: '/user',
  query: {
    userId: '123'
  }
})

在目标组件中，可以通过以下代码获取到传递的参数。

this.$route.query.userId // '123'

2.2 路由参数传递

路由参数传递可以将参数直接绑定到路径中，同样也可以将参数绑定到组件中，直接在组件中使用即可。

router.push('/user/123')

在目标组件中，可以通过以下代码获取到传递的参数。

this.$route.params.userId // '123'

在路由配置中，需要在路由路径中设置参数，并且在组件中定义接收参数的属性名称。

{
  path: '/user/:userId',
  name: 'User',
  component: User,
  props: true
}

2.3 状态对象传递

在进行Router跳转时，可以通过Router状态对象的方式传递参数。

router.push({
  path: '/user',
  state: {
    userId: '123'
  }
})

在目标组件中，通过访问路由的状态对象获取传递的参数。

this.$route.params.state.userId // '123'

3. 示例说明

以下示例演示了如何使用Router进行路由跳转并传递参数。

3.1 Query参数传递示例

// 在按钮的点击事件中进行路由跳转
<button @click="toUser">Go to User</button>

methods: {
  toUser() {
    // 传递参数
    this.$router.push({
      path: '/user',
      query: {
        userId: '123'
      }
    })
  }
}

在目标组件中获取参数的方式如下。

console.log(this.$route.query.userId) // '123'

3.2 路由参数传递示例

// 在按钮的点击事件中进行路由跳转
<button @click="toUser">Go to User</button>

methods: {
  toUser() {
    // 传递参数
    this.$router.push(`/user/${this.userId}`)
  }
},
data() {
  return {
    userId: '123'
  }
}

在路由配置中将参数绑定到路由路径中。

{
  path: '/user/:userId',
  name: 'User',
  component: User,
  props: true
}

在目标组件中获取参数的方式如下。

console.log(this.$route.params.userId) // '123'

4. 总结

使用Router进行路由跳转时，参数的传递方式有多种，应根据实际需求选择最合适的方式。常用的传参方式包括：Query参数、路由参数和状态对象。

阅读剩余 64%