在Vue中,我们可以使用Vue Router来实现路由导航和组件之间的切换。在路由导航中,有时候我们需要向目标组件传递一些参数,Vue Router提供了多种方式来实现路由传参。

下面是一些常用的路由传参方式:

1. 路由路径中传参

可以通过在路由路径中添加参数来实现路由传参。

// 路由配置
{
  path: '/user/:id',
  component: User,
  props: true
}

// 在路由导航中传递参数
router.push({ path: '/user/' + userId })

在上面的代码中,我们定义了一个路由路径`/user/:id`,其中`:id`表示路由参数。在路由导航中,我们通过`router.push({ path: '/user/' + userId })`将userId参数传递给目标组件。

在目标组件中,我们可以通过`$route.params`来获取路由参数:

// 在目标组件中获取路由参数
export default {
  props: ['id'],
  created() {
    console.log(this.$route.params.id)
  }
}

2. 查询参数传参

可以通过在路由路径后添加查询参数来实现路由传参。

// 路由配置
{
  path: '/user',
  component: User,
  props: true
}

// 在路由导航中传递参数
router.push({ path: '/user', query: { id: userId }})

在上面的代码中,我们通过在`router.push`方法的`query`参数中传递参数来实现路由传参。

在目标组件中,我们可以通过`$route.query`来获取查询参数:

// 在目标组件中获取查询参数
export default {
  created() {
    console.log(this.$route.query.id)
  }
}

3. 属性传参

可以通过在路由配置中添加`props`属性来实现路由传参。

// 路由配置
{
  path: '/user',
  component: User,
  props: { id: userId }
}

在上面的代码中,我们通过在`props`属性中传递参数来实现路由传参。

在目标组件中,我们可以通过声明`props`来获取传递的参数:

// 在目标组件中获取传递的参数
export default {
  props: ['id'],
  created() {
    console.log(this.id)
  }
}

需要注意的是,在使用属性传参时,必须在目标组件中声明`props`,否则会抛出警告。同时,在使用属性传参时,可以使用`props: true`来将路由参数自动注入到目标组件的props中。

Logo

前往低代码交流专区

更多推荐