this.$route.params详解

发布时间:2023-05-18

一、获取路由参数

this.$route.params 是 Vue Router 提供的一个属性,它用来获取路由参数。在路由路径中包含动态参数时,我们可以通过此属性来获取它们的值。例如,我们定义了一个路由路径为 /user/:id,那么我们就可以通过 this.$route.params.id 来获取路由参数值。

二、传递参数

除了获取参数,this.$route.params 还可以用来传递参数。我们可以在路由跳转时,通过 params 属性来传递参数。例如:

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

在这个例子中,我们通过 $router 实例的 push 方法跳转到 /user 路径,并且通过 params 属性传递了一个 id 参数,它的值为 123。在目标组件中,我们就可以通过 this.$route.params.id 来获取这个参数。

三、监听参数变化

有时候我们需要监听路由参数变化,以便在参数改变时做出响应。我们可以通过 $watch 来监听 this.$route.params 对象,以达到这个目的。例如:

watch: {
  '$route.params': function(newParams, oldParams) {
    console.log('参数变化了', newParams, oldParams)
  }
}

在这个例子中,我们在组件的 watch 选项中监听了 '$route.params' 对象,当参数发生变化时,就会触发回调函数。在回调函数中,我们可以获取新旧参数,以便进行相应处理。

四、注意事项

使用 this.$route.params 时需要注意以下几点:

  1. 仅在路由路径中包含动态参数时才有值,否则它是一个空对象;
  2. 当路由参数变化时,因为组件已经存在,Vue 不会销毁和重新创建组件实例,因此不会触发生命周期函数,需要手动监听参数变化;
  3. 如果使用命名路由,那么访问参数的方式变为 this.$route.params.[name],其中 name 为路由名称。

五、本文示例代码

// 路由定义
{
  path: '/user/:id',
  name: 'user',
  component: User
}
// 路由跳转
this.$router.push({
  name: 'user',
  params: {
    id: '123'
  }
})
// 监听参数变化
watch: {
  '$route.params': function(newParams, oldParams) {
    console.log('参数变化了', newParams, oldParams)
  }
}
// 访问参数值
console.log('参数值是:', this.$route.params.id)