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的開發中遊刃有餘。