一、路由参数概述
在Vue.js中，我们可以使用Vue Router来进行路由控制，实现SPA（单页面应用）的开发。而路由参数（Route Params）则是在路由链接中传递的参数，例如：
<router-link :to="'/user/'+userId">用户详情</router-link>
这里的userId就是一个路由参数。在使用Vue Router时，我们可以通过this.$router.params来获取到路由参数。这个对象是一个键值对，键为路由参数名称，值为对应的参数值。
二、获取路由参数
获取路由参数的方式非常简单，只需要在组件中使用this.$route.params即可，例如下面的代码：
export default {
name: 'UserDetail',
data() {
return {
userId: this.$route.params.userId
}
}
}
这里通过this.$route.params.userId获取到了路由参数中的userId，并将其作为data数据的初始值。在实际开发中，我们也可以在组件的生命周期函数中获取路由参数，例如在mounted函数中，这样可以确保路由参数已经准备好。
三、动态路由参数
在Vue Router中，路由参数可以是动态的。这意味着我们可以在路由链接中设置一个参数名称，然后在组件中根据这个参数名称来动态获取参数值。例如：
const routes = [
{
path: '/user/:userId',
name: 'user',
component: UserDetail
}
];
这里使用了冒号来定义了一个动态参数userId，这意味着用户可以通过不同的userId值来访问这个路由。在UserDetail组件中，我们可以通过this.$route.params.userId获取到访问时传递进来的userId值，无论是通过路由链接还是通过编程式导航的方式。
四、路由参数的变化
当路由参数变化时，组件也需要重新渲染，并且需要重新获取路由参数。在Vue.js中，我们可以使用watch来监听路由参数的变化，例如下面的代码：
export default {
name: 'UserDetail',
data() {
return {
userId: this.$route.params.userId
}
},
watch: {
'$route.params': {
handler: function(newParams, oldParams) {
this.userId = newParams.userId;
},
immediate: true
}
}
}
这里使用了$watch，监听了$route.params的变化。当路由参数发生变化时，会执行handler函数，从而重新获取路由参数。由于我们设置了immediate为true，因此在组件挂载后就立即执行一次。
五、路由参数的传递
在Vue.js中，我们可以使用props来实现父组件向子组件传递数据。在路由中传递参数也是同样的道理，只需要在路由配置文件中设置props为true，在组件中就可以直接使用props来获取路由参数了。
const routes = [
{
path: '/user/:userId',
name: 'user',
component: UserDetail,
props: true
}
];
这里设置props为true，意味着将路由参数作为组件的props传递给了子组件。在UserDetail组件中，我们就可以直接使用props来获取路由参数。
export default {
name: 'UserDetail',
props: ['userId'],
...
}
这里使用了props来定义了一个userId属性，作为路由参数的传递值。在实际使用时，我们只需要在组件中引用props即可。
六、小结
在Vue.js中，this.$router.params是一个非常重要的对象，将路由参数以键值对的形式进行了封装。我们可以使用它来动态获取路由参数、监听路由参数的变化、传递路由参数等等。只有深刻理解和熟练掌握了这个对象，才能在Vue.js的开发中游刃有余。
原创文章，作者：CYNF，如若转载，请注明出处：https://www.506064.com/n/142196.html
微信扫一扫 
支付宝扫一扫 