Vue中监听路由参数变化

 var productType = Vue.component('indexB', {
                data() {
                    return {
                        allProduct: ''
                    }
                },
                // 在html中获取路由参数 通过$route.params.参数名
                template: `<div>这是显示商品编号{{$route.params.id}}
                    <p>{{allProduct}}</p>
                </div>`,
                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}
        ]
      })