路由传参的几种方式?

106 阅读1分钟

在Vue中,有以下几种常见的路由传参方式:

  1. 路由路径传参:可以在路由路径中直接通过占位符的方式传递参数。例如:
{
  path: '/user/:id',
  component: User
}

在组件中可以通过$route.params.id来获取传递的参数。

  1. 查询参数传参:可以通过在URL中添加查询参数来传递参数。例如:
{
  path: '/user',
  component: User
}

在组件中可以通过$route.query来获取传递的参数。

  1. 路由对象传参:可以通过在router-link中的to属性中直接传递一个路由对象,包含参数信息。例如:
<router-link :to="{ path: '/user', query: { id: 1 }}">User</router-link>

在组件中可以通过$route.query.id来获取传递的参数。

  1. 命名路由传参:可以通过在router-link中使用命名路由来传递参数。例如:
{
  path: '/user',
  name: 'user',
  component: User
}
<router-link :to="{ name: 'user', params: { id: 1 }}">User</router-link>

在组件中可以通过$route.params.id来获取传递的参数。

  1. props传参:可以通过将路由的props属性设置为true来将路由参数作为组件的props传递。例如:
{
  path: '/user/:id',
  component: User,
  props: true
}

在组件中可以直接通过props来获取传递的参数。

以上是一些常见的路由传参方式,根据具体的需求可以选择合适的方式进行参数传递。