一、获取路由参数
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)