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

【问题标题】：prismjs not working between different routes using vuerouter in vuejsprismjs 不能在 vuejs 中使用 vuerouter 在不同的路由之间工作
【发布时间】：2020-10-14 12:50:33
【问题描述】：

我已在main.js 文件中全局导入prism.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 prismjs 文件吗？我认为保留main.js 可以正常工作，但它不会在路由之间全局添加...

【问题讨论】：

标签： javascript vue.js vue-router prismjs

【解决方案1】：

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

import Prism from "prismjs"

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

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

【讨论】：