this.$router.params完全指南

一、路由参数概述

在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的开发中游刃有余。