vue使用highlight插件时 跳转路由 值绑定不上去的问题

vue项目开发遇到需要显示代码块的功能,用了两个插件prism和highlight。

都用了下之后选择了highlight，但是在路由跳转时出现了后台返回的代码块字段绑定不上去的情况。

用v-text指令绑上去也只是识别为字符串 没有样式。试了各种办法。最后是用v-html指令解决的。

<pre><code class="xml hljs"   v-html="formattedCode" v-highlight>{{ WriteData.xsd  }}  </code></pre>

单独在页面引用一下js

import hljs from 'highlight.js';

在computed中添加下面的代码

computed: {
        formattedCode() {
            return hljs.highlightAuto(this.WriteData.xsd).value;
        }
    },

这样我的代码块高亮样式就出来了。前后对比图↓。