Vue中watch监听路由的使用场景

   created(){
        if(this.$route.params && this.$route.params.id){
            //从路径获取id值
            const id =this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
        }else{//路径中没有id
            //清空清单
            this.teacher={}
        }
        }

当进行路由跳转，两次都跳转到一个页面的时候，在页面渲染之前执行的created()方法只会在第一次的时候执行

如上图代码第一次跳转的时候

如图所示路径中是有id值的，所以执行上述代码中if中的代码片段

当前几添加讲师的时候

如图所示是没有id值的，应该执行else中的代码片段，但是，前面已经说了第二次执行的时候不会执行created()的所以不会执行else中的代码片段，所以得使用watch监听器

修改代码

 created(){
        this.init()
    },

     */
    watch:{//路由监听
        $route(to,from){//路由变化方式，路由发生变化的时候，方法就会执行
            this.init()
        }
    },


 methods:{
        init(){
             //判断路径中是否有id'值
        if(this.$route.params && this.$route.params.id){
            //从路径获取id值
            const id =this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
        }else{//路径中没有id
            //清空清单
            this.teacher={}
        }
        },
    }

    watch路由监听就是当路径发生改变得时候执行
     这样做的话，当第一次点击有id值的时候执行created->init()中的if中的方法，当再此页面中点击修改的时候，路由发生了改变，则被 watch路由监听器监听执行监听器中的方法，监听器中的方法与created中的一样，只不过是路径中没有id'值了，所以执行的是init中的else语句。从而实现执行this.teacher={}