Vue中Intro.js多页面导航失效问题求助

我之前也折腾过跨路由的intro.js引导，踩过不少坑，咱们来一步步搞定它！

核心问题分析 #

你之前的代码之所以失效，是因为intro.js的步骤是绑定在当前页面的DOM元素上的——当你路由跳转后，原来的页面DOM被销毁了，那些依赖旧DOM的步骤自然就找不到元素了。而且一次性添加所有路由的步骤，intro.js在启动时会检查所有元素是否存在，不存在的步骤会直接跳过，这就导致你的引导流程断了。

解决方案思路 #

我们需要分路由管理引导步骤，用全局状态保存引导进度，让每个路由组件在加载完成后，根据当前进度加载对应步骤并继续引导。下面用Pinia（Vue官方推荐的状态管理）来实现，如果你用Vuex思路也是一样的。

第一步：创建全局引导状态管理 #

先建一个状态管理文件，用来保存引导的进度、是否激活，以及所有步骤的配置：

// stores/guide.js
import { defineStore } from 'pinia'

export const useGuideStore = defineStore('guide', {
  state: () => ({
    currentStepIndex: 0, // 当前引导到第几个步骤
    isGuideActive: false, // 是否正在进行引导
    // 定义所有引导步骤，每个步骤绑定对应的路由
    guideSteps: [
      {
        route: '/',
        element: '#one',
        intro: "第一步：这是首页的元素One",
        position: 'right',
      },
      {
        route: '/',
        element: '#two',
        intro: "第二步：这是首页的元素Two",
        position: 'bottom',
      },
      {
        route: '/someroute',
        element: '#three',
        intro: "第三步：这是新页面的元素Three",
        position: 'top',
      },
      // 可以继续添加更多跨路由的步骤
    ]
  }),
  actions: {
    // 前进到下一步
    nextGuideStep() {
      this.currentStepIndex++
      if (this.currentStepIndex >= this.guideSteps.length) {
        // 引导结束，重置状态
        this.isGuideActive = false
        this.currentStepIndex = 0
      } else {
        this.isGuideActive = true
      }
    },
    // 启动引导
    startFullGuide() {
      this.currentStepIndex = 0
      this.isGuideActive = true
    }
  }
})

第二步：在路由组件中绑定引导逻辑 #

每个路由组件需要在mounted钩子中（此时DOM已渲染完成）检查是否需要继续引导，然后加载对应步骤：

首页组件（对应路由 /）

<template>
  <div id="one">首页元素One</div>
  <div id="two">首页元素Two</div>
</template>

<script setup>
import { useGuideStore } from '@/stores/guide'
import { useIntro } from 'vue-introjs' // 组合式API用这个，如果是Options API用this.$intro()
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const guideStore = useGuideStore()
const intro = useIntro()
const router = useRouter()

onMounted(() => {
  // 只有当引导激活，且当前步骤属于当前路由时，才启动引导
  if (guideStore.isGuideActive && guideStore.guideSteps[guideStore.currentStepIndex].route === '/') {
    // 收集当前路由下的所有连续步骤
    let currentRouteSteps = []
    let stepIndex = guideStore.currentStepIndex
    while (stepIndex < guideStore.guideSteps.length && guideStore.guideSteps[stepIndex].route === '/') {
      currentRouteSteps.push(guideStore.guideSteps[stepIndex])
      stepIndex++
    }

    // 添加当前路由的步骤到intro实例
    currentRouteSteps.forEach(step => intro.addStep(step))

    // 启动引导，完成后跳转到下一个路由
    intro.start()
      .oncomplete(() => {
        // 更新全局步骤索引
        guideStore.currentStepIndex = stepIndex
        // 如果还有步骤，跳转到对应路由
        if (guideStore.currentStepIndex < guideStore.guideSteps.length) {
          router.push(guideStore.guideSteps[guideStore.currentStepIndex].route)
        } else {
          // 引导结束
          guideStore.isGuideActive = false
        }
      })
      .onexit(() => {
        // 用户主动退出引导，重置状态
        guideStore.isGuideActive = false
      })
  }
})
</script>

新页面组件（对应路由 /someroute）

<template>
  <div id="three">新页面元素Three</div>
</template>

<script setup>
import { useGuideStore } from '@/stores/guide'
import { useIntro } from 'vue-introjs'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const guideStore = useGuideStore()
const intro = useIntro()
const router = useRouter()

onMounted(() => {
  if (guideStore.isGuideActive && guideStore.guideSteps[guideStore.currentStepIndex].route === '/someroute') {
    // 添加当前步骤
    const currentStep = guideStore.guideSteps[guideStore.currentStepIndex]
    intro.addStep(currentStep)

    intro.start()
      .oncomplete(() => {
        guideStore.nextGuideStep()
        // 如果还有后续步骤，跳转到对应路由
        if (guideStore.isGuideActive) {
          router.push(guideStore.guideSteps[guideStore.currentStepIndex].route)
        }
      })
      .onexit(() => {
        guideStore.isGuideActive = false
      })
  }
})
</script>

第三步：触发引导的入口 #

比如在某个按钮点击时启动引导：

<template>
  <button @click="triggerGuide">开始使用引导</button>
</template>

<script setup>
import { useGuideStore } from '@/stores/guide'
import { useRouter } from 'vue-router'

const guideStore = useGuideStore()
const router = useRouter()

const triggerGuide = () => {
  guideStore.startFullGuide()
  // 跳转到第一个步骤所在的路由
  router.push(guideStore.guideSteps[0].route)
}
</script>

关键注意点 #

• 必须用mounted钩子：created钩子执行时DOM还没渲染，查询选择器找不到元素，所以引导步骤会失效。
• 分路由加载步骤：不要一次性添加所有路由的步骤，否则intro.js会因为找不到元素跳过步骤。
• 全局状态的必要性：路由跳转后组件重新渲染，只有全局状态能保存引导进度，确保流程连贯。
• 处理退出逻辑：别忘了监听onexit事件，用户主动退出时重置引导状态，避免下次进入页面自动启动引导。

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