526互联

vue全家桶进阶之路35：Vue3 传递参数query和params

发布时间 2023-04-18 16:21:54作者: 城南城南

在 Vue.js 3.x 中，可以通过路由的 params 和 query 属性来传递参数。

  1. 通过 params 传递参数

我们可以在路由跳转时通过 params 传递参数。具体方法如下：

// 在组件中跳转路由
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter()

    const handleClick = () => {
      // 传递参数
      router.push({ name: 'user', params: { id: 123 } })
    }

    return {
      handleClick
    }
  }
})

在上述示例中，我们在路由跳转时通过 params 传递了一个名为 id，值为 123 的参数。在接收方的组件中，我们可以通过 $route.params 对象来获取参数，例如：

// 在接收方组件中获取参数
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, { route }) {
    const id = route.params.id

    return {
      id
    }
  }
})

在上述示例中，我们通过 $route.params.id 获取了传递过来的 id 参数。

  1. 通过 query 传递参数

与 params 类似，我们也可以在路由跳转时通过 query 传递参数。具体方法如下：

// 在组件中跳转路由
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter()

    const handleClick = () => {
      // 传递参数
      router.push({ name: 'user', query: { id: 123 } })
    }

    return {
      handleClick
    }
  }
})

在上述示例中，我们在路由跳转时通过 query 传递了一个名为 id，值为 123 的参数。在接收方的组件中，我们可以通过 $route.query 对象来获取参数，例如：

js
  
// 在接收方组件中获取参数
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, { route }) {
    const id = route.query.id

    return {
      id
    }
  }
})

在上述示例中，我们通过 $route.query.id 获取了传递过来的 id 参数。需要注意的是，查询参数的值始终为字符串类型，如果需要转换为其他类型，需要手动进行转换。