【vue】vue 使用highlight.js的坑：highlight效果經常沒有了

首先，我說下我爲啥會遇到這個吭。。。。

項目如下：https://github.com/guosimin/data-management  , 當然如果給我來個star，我會很開心的。

1.我用的是vue-cli 搭建的前端項目

2.我的內容來源是csdn中的博文，而博文裏面用到的代碼通過調用highlight.js實現的

3.原本我可以考慮通過Selenium爬取調用後的結果，這樣樣式能正常顯示就行，然而Selenium的效率真的不敢恭維。。

4.最後決定在頁面調用highlight.js實現和csdn網站上一樣的效果

 

如果沒看過我項目，那其實上面的都是廢話，不過你有時間，也可以看看。我這裏先說解決方法：

1.首先，頁面總得引入hightlight包吧，本來想和網上一下教程那樣用 npm install hightlight... 然鵝，npm沒有找到hightlight。。。。所以我們用最原始的方式，我直接把它寫到了index.html裏面了。

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 

2.如果用的 vue-cli 搭建的，那我們打開router目錄找到main.js，然後寫入以下代碼。（ 注意hightlight會在pre標籤下code標籤渲染）

#在main.js定義自定義指令 
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

3.然後在標籤下調用

#在要使用高亮的地方使用v-highlight指令
<div v-html="Marked" v-highlight>
</div>

完成上面步驟，hightlight的效果就會出來。

 

再說原因：

因爲我下載下來是壓縮包，所以再一堆abcdef方法中，我到現在也沒有完全看清整個代碼包的實現思路，不過我找到導致問題的關鍵，就是vue-route切換地址後，l.called還是true，所以不執行渲染hightlight的方法。

至於爲啥不找一個沒壓縮來分析，我當時還我真的忘記了，。。。。(╯‵□′)╯︵┻━┻最後當我想起來，我已經通過上面方法解決。爲啥不繼續深究？人類製造工具的原因就是因爲懶。。。