需求

父路由中使用了form组件,子路由中同样使用了该组件

当离开子页面时候,form中input框中数据全部清空

分析

这里我复用了同一个form组件,在父子路由中,并没有做数据隔离,所以需要手动处理

一开始想到的3种方法:1.beforeRouteLeave 2. beforeRouteEnter 3.destoyed

三种都不行,或者不方便

第一种:因为父子路由中切换并不会触发 beforeRouteLeave

同理第二种

第三种:没有离开父路由,这个钩子也是不会触发的

方法

还是使用了watch来监听路由的变化,代码:

在父组件下
watch: {
    $route(now, old) {
      //console.log(now, 'now')
      if (now.name === 'category') {//路由名
        this.$refs.categoryForm.clearForm()//触发子组件中清空数据的方法
      }
    }
  }
}//即在离开子组件后,匹配到路由名为的父路由时,触发该方法
在子组件下:
watch: {
    $route(now, old) {
      if (now.name === 'alter-category') {
        console.log(now.name)
        this.CategoryDetail()
      }
    }
  }
//即在进入子组件后,匹配到路由名为的子路由时,触发该方法

爬。