vue路由跳转清空数据

修改和添加都是使用的同一个页面，在修改页直接跳转到添加页时页面数据不清空

问题代码❌

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

原因是created（）在页面渲染之前执行一次，执行一次后不再加载了。

解决办法⚡️加上路由监听使每次跳转后都会触发init()方法进行判断清空表单

created() {
      this.init()
    },
    watch: {  //监听
      $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
        this.init()
      }
    },
    methods: {
      init(){
        if(this.$route.params && this.$route.params.id){
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
           this.getInfo(id)
        }else {
          //如果没有值则清空表单
          this.teacher= {}
        }
      }
   }