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

- 日理万妓 2021-09-25 07:42 353阅读 0赞

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()方法只会在第一次的时候执行

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70][]

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

当前几添加讲师的时候

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70 1][]

如图所示是没有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=\{\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70]: /images/20210923/513f4d7fbdee48129e25a1e141eb8594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70 1]: /images/20210923/1ba9aef22c964ab79b0f2b053826549f.png