Vue路由跳转时Reveal.js未初始化 仅刷新页面可正常加载

路由跳转时Reveal初始化失效是三个问题叠加导致的：

1. Reveal.js采用全局单例设计，重复调用Reveal.initialize()不会触发重初始化，若页面存在未销毁的旧实例，新初始化逻辑会直接静默失败，控制台无任何报错输出。
2. 初始化时机错误：comic_data是父组件通过接口异步拉取的props，组件mounted钩子触发时，v-for渲染漫画页的<section>节点可能还未插入DOM，Reveal扫描不到slides节点自然无法完成渲染；路由跳转时若组件被复用，mounted钩子不会重复触发，原有监听路由的初始化逻辑也没有等待DOM更新完成。
3. 初始化时未指定Reveal挂载根节点，默认会全局查找.reveal类名元素，路由切换过程中DOM未卸载完成时容易匹配到旧节点，导致初始化绑定到错误DOM上。

按以下步骤调整代码即可：

• 在组件data中存储Reveal实例引用，每次初始化前先销毁已存在的旧实例，清理全局状态残留
• 放弃在mounted、路由watch中直接初始化，改为监听comic_data属性，等数据返回后通过$nextTick等待DOM完成渲染，再执行初始化
• 初始化时明确指定挂载根节点为当前组件的ref元素，避免全局匹配DOM的冲突
• 在组件销毁钩子中主动销毁Reveal实例，释放事件监听和全局状态
• 适配hash路由模式，关闭Reveal自带的hash导航功能，避免和Vue Router冲突

<template>
  <div class="reveal" id="comic_box" ref="comic_box">
    <div id="slides_div" class="slides">
      <section v-for="(page, index) in comic_data.pages" :key="page.index" :data-menu-title="page.page_file_name">
        <img :data-src="'/image/' + comic_data.selector + '/' + page.index " class="w-100"  :alt="page.page_file_name">
      </section>
    </div>
  </div>
</template>

<script>
import Reveal from "reveal.js";

export default {
  name: "TheComicReader",
  data () {
    return {
      revealInstance: null // 存储Reveal实例引用
    }
  },
  props: {
    comic_data: Object
  },
  watch: {
    // 监听漫画数据变化，数据渲染完成后再初始化
    comic_data: {
      immediate: true,
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.initReveal()
        })
      }
    }
  },
  methods: {
    initReveal() {
      // 先销毁已存在的旧实例，清理残留状态
      if (this.revealInstance) {
        this.revealInstance.destroy()
        this.revealInstance = null
      }
      // 初始化时明确指定当前组件的根节点，配置适配漫画阅读场景
      this.revealInstance = new Reveal(this.$refs.comic_box, {
        controls: true,
        progress: true,
        center: true,
        hash: false, // 关闭Reveal自带hash导航，适配Vue Router的hash模式
        lazyLoad: true, // 开启懒加载自动识别data-src属性的图片
        transition: 'none' // 关闭翻页动画，减少漫画阅读时的卡顿感
      })
      this.revealInstance.initialize()
    }
  },
  beforeUnmount() { // Vue2项目替换为beforeDestroy钩子
    // 组件销毁时主动清理Reveal实例
    if (this.revealInstance) {
      this.revealInstance.destroy()
      this.revealInstance = null
    }
  }
}
</script>

<style>
/* 注意：Reveal的基础CSS不要放在scoped作用域下，否则样式会不生效，建议全局引入reveal.js/dist/reveal.css */
</style>

• 如果路由视图外层用了<keep-alive>缓存组件，需要额外在activated钩子中调用this.revealInstance?.sync()同步状态，在deactivated钩子中暂停实例事件，避免缓存导致的交互异常。
• 必须全局引入Reveal的基础CSS和对应主题CSS，否则即使初始化成功也会出现布局错乱。

内容的提问来源于stack exchange，提问作者Ajurna