Vueにおける傍受ルーティングパラメータの変化

 var productType = Vue.component('indexB', {
                data() {
                    return {
                        allProduct: ''
                    }
                },
                //  html          $route.params.   
                template: `
        {{$route.params.id}}
                    
{{allProduct}}
                
`,
                mounted() {
                    //  js          this.$route.params.   
                    console.log(this.$route.params.id);
                    console.log(this.$route);
                },
                watch: {
                    '$route' (to, from) {
                        console.log(to);
                        console.log(from);
                        if (to.params.id == '11') {
                            this.allProduct = '   /  /  ……'
                        } else if (to.params.id === '22') {
                            this.allProduct = '  /  /  ……'
                        } else {
                            this.allProduct = '  /  /  ……'
                        }
                    }
                }
            })
     // 3.       ，              
      var router = new VueRouter({
        // 4.   routes        ，      ，        ，          ，            name(         )/path(    )/component(         )
        routes: [     
          //         :   
          {name: 'productType', path: '/product_type/:id', component: productType}
        ]
      })