javascript - prismjs 不能在 vuejs 中使用 vuerouter 在不同的路由之间工作

Question

我已经在文件中prism.js全局导入。 代码块语法突出显示在 Home 组件中工作正常，但在使用 路由到另一个页面后，没有效果。main.js
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全局导入 prismjs 文件吗？我认为保留main.js会很好，但它不会在路线之间全局添加......

Answer 1

一旦你使用 npm 安装它，最好的方法是在每个组件中单独使用它时导入它import Prism from 'prismjs'。只需确保Prism.highlightAll()在渲染 DOM 之后在使用 prism 的组件中使用方法，无论是在mount()钩子中还是在updated Vuejs 钩子中，使用nextTick方法确保在使用 prism 之前渲染所有 DOM。因此，在您的情况下，您应该以这种方式使用它：

import Prism from "prismjs"

updated: function () {
  this.$nextTick(function () {
    Prism.highlightAll();
  })
}

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