wangeditor5跳转页面后无法输入内容，报错Cannot resolve a Slate node from DOM node: [object HTMLSpa](keep-alive缓存问题）

最近使用wangeditor5富文本编辑器开发，发现跳转页面后查看原页面时，富文本无法输入内容，报错：
Cannot resolve a Slate node from DOM node: [object HTMLSpanElement]

当时利用页面生命周期控制组件，注销富文本后重新初始化也没有解决，最后发现是keep-alive缓存导致的，通过设置keep-alive不缓存某些页面才解决了问题。

解决方案

设置keep-alive不缓存使用wangeditor5的页面

 <keep-alive :exclude="excludePage">
 <!--excludePage放使用wangeditor5的页面。例如：['index','list']-->
       <router-view></router-view>
 </keep-alive>

以上就是wangeditor5的报错原因和解决方案，下面针对keep-alive缓存进行记录。

---

keep-alive

vue 2.1.0 版本之后，keep-alive新加入了两个属性

参数

• include ：只有名称匹配的组件会被缓存
• exclude：任何名称匹配的组件都不会被缓存

<!-- Array (使用 v-bind，被include的都会被缓存，被exclude的都不会缓存) -->
 <keep-alive :include="includePage" :exclude="excludePage">
       <router-view></router-view>
 </keep-alive>

data() {
        return {
            includePage:['a','b'],
            excludePage:['c','d'],
        }
    },

include和exclude还有其他两种写法

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>
 
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

生命周期

缓存路由组件所独有的两个钩子，用于捕获路由组件的激活状态。只适用于keep-alive

activated ：路由组件被激活时触发。（当进入缓存的路由组件时触发）

deactivated：路由组件失活时触发。（当离开缓存的路由组件时触发）

如包裹的组件：组件A和组件B。

• 第一次进入到组件A时，组件A的created和activated生命周期函数都会被触发
• 从组件A跳转到组件B时，组件A的deactivated的生命周期函数会被触发；
• 从组件B切换回组件A时，组件A的activated生命周期函数会被触发，但是created生命周期函数不会被触发