this.$route.params详解

小蓝 • 2025-01-06 15:17 • 编程

一、获取路由参数

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)

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/312901.html