使用vuejs中的vuerouter，prismjs无法在不同的路由之间工作

问题描述

我已经在prism.js文件中全局导入了main.js。
代码块语法突出显示在Home组件中可以正常工作，但是在使用vue-router路由到另一页之后，没有任何效果。

在main.js

中

// Global Import
import 'prismjs/prism.js'
import 'prismjs/components/prism-swift.min.js' // swift lang
import './theme/prism-swift-theme.css'

在我的“关于页面”组件中...

<pre><code class="language-swift">
  private func setupSubviews() {
   let value = "Loading code block";
  }
</code></pre> 

无法理解这里出了什么问题。有什么方法可以全局导入node_modules棱镜js文件？我以为保留main.js会很好，但是并不能在路由之间全局添加...

解决方法

使用 npm 安装后，最好的方法是在每个组件中单独使用它时使用 import Prism from 'prismjs' 导入它。无论是在 Prism.highlightAll() 钩子中还是在 mount() Vuejs hook 中使用 {{ 1}} 方法以确保在使用棱镜之前渲染所有 DOM。所以在你的情况下你应该这样使用它：

updated

确保在您的组件中单独调用 highlightAll 而不是全局调用。