vue3路由传参query和params

在Vue3中，路由传参可以通过query和params两种方式实现。

1. query传参：

在路由中，使用props将路由参数传入组件中，例如：

// 定义路由
{
  path: '/user',
  component: User,
  props: (route) => ({ id: route.query.id })
}

// 跳转路由
<router-link :to="{ path: '/user', query: { id: 123 }}">User</router-link>

在User组件中，可以通过this.$route.query获取路由参数。

2. params传参：

在路由中使用动态路由参数来传递参数，例如：

// 定义路由
{
  path: '/user/:id',
  component: User,
}

// 跳转路由
<router-link :to="{ path: '/user/123' }">User</router-link>

在User组件中，可以通过this.$route.params获取路由参数。

相关问题

vue路由传参query和params

Vue 路由传参可以使用 query 和 params 两种方式。

1. 使用 query 传参：

query 方式传参是将参数拼接在 URL 后面，以键值对的形式传递，例如：

this.$router.push({ path: '/user', query: { id: '123' }})

在接收参数的页面，可以通过 `$route.query` 获取参数：

console.log(this.$route.query.id) // 123

2. 使用 params 传参：

params 方式传参是将参数作为路由的一部分，例如：

this.$router.push({ path: '/user/123' })

在声明路由时，需要使用 `:id` 表示参数：

{
  path: '/user/:id',
  component: User
}

在接收参数的页面，可以通过 `$route.params` 获取参数：

console.log(this.$route.params.id) // 123

需要注意的是，params 方式传参需要在路由声明时定义参数的名称和类型，而 query 方式传参则不需要。

vue路由传参query和params示例

Vue 路由传参有两种方式：query 和 params。

1. query

query 传参方式是通过在路由地址后面拼接参数，例如：

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

在接收参数的组件中，可以通过 `$route.query` 获取参数：

console.log(this.$route.query.userId) // 输出 123
console.log(this.$route.query.userName) // 输出 Tom

2. params

params 传参方式是通过在路由定义时设置参数，例如：

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

在传参时使用 `$router.push` 方法：

this.$router.push({
  name: 'user',
  params: {
    userId: '123'
  }
})

在接收参数的组件中，可以通过 `$route.params` 获取参数：

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

注意：params 传参方式只能在路由定义时设置参数，而不能在路由地址中动态拼接参数。