切换标签页，富文本编辑器绑定的值无缘无故消失了，看我如何解决它

前言

今天测试反馈了一个bug，后台商品管理的富文本编辑器，在进行标签页切换的时候都会造成富文本内容清空，其他属性值正常显示。听到这问题时，我一个后端仔怎么解决这么"高难度"的问题。先是各种浏览器找解决办法，但也没有想要的，没办法了只能硬着头皮上了。

<!-- 商品详情 -->
    <el-form-item label="商品详情：">
      <tinymce v-model="dataForm.detail.detail" @loadingShow="loadingShow" 
      @loadingHidden="loadingHidden" :value="dataForm.detail.detail" 
      :height="600" :buttonLoading="buttonLoading"></tinymce>
    </el-form-item>

后台管理系统中富文本编辑器用的是tinymce，感谢作者，虽然一路坎坷。通过查看代码和富文本组件也并没发现异样。这个时候想到会不是是组件重载的问题。为了验证，对代码进行了改进：

<el-button @click="isTinymce = true">测试重载</el-button>
    <!-- 商品详情 -->
    <el-form-item label="商品详情：" v-if="isTinymce">
      <tinymce v-model="dataForm.detail.detail" @loadingShow="loadingShow" @loadingHidden="loadingHidden" :value="dataForm.detail.detail" :height="600" :buttonLoading="buttonLoading"></tinymce>
    </el-form-item>

模拟bug出现的步骤，然后点击测试按钮，发现富文本的值被展示出来了。由此可见确实是组件重载的问题了。那怎么解决呢?想到标签的切换，会导致路由的切换，当路由每次切换到详情页就重新加载组件，就能解决了吧。说干就干

watch: {
    '$route' (to,from) {
      this.isTinymce = false
      if(to.name === this.$route.name) {
        setTimeout(() => {
          this.isTinymce = true
        }, 500);
      }
    }
  },

对路由进行监听，如果跳转的路由和当前路由一样就将组件重新加载。不出所料，问题完美解决。