如何在vue项目中，跨页面（跨路由）使用新手引导工具 Intro.js

功能要求

公司要求在自己的平台上实现新手引导，还是跨页面，跨路由的。我找了下网上的新手引导插件，最后选了Intro.js来使用，可能因为它稍微好看那么一丢丢吧。

我写的大多数都是思路，如果能看懂的话应该能轻易实现这些效果，直接粘贴的话估计悬哈。

建议先去Intro.js官网看一下demo，了解一下再来看demo基础上的操作。

我只是个小小的基层程序员，如果有什么让大家看了发笑的想法和逻辑就不要嘲笑我了，请温柔地告诉我谢谢。

以下都是自己真实遇到的问题并且想方设法解决的，有更好的解决办法可以贴出来一起讨论。

使用Intro.js遇到的问题以及代码

1.不能跨路由

最大的问题就是，Intro.js不能跨路由，因为它是在当前页面，根据dom唯一的Id值,来获取并显示新手引导，所以没有渲染的页面它是获取不到的。
所以我想的是，在每个页面都从头加载一次Intro.js，上一个页面引导完毕以后，就直接router.push到下一个路由，然后自动加载，进行引导，引导完了再push到下一个路由，好的，完美套娃。

我们先在utils.js文件里封装一个工具类Intro.js，方便每个页面直接引用。这里我直接贴最终版的代码啦，我觉得还是比较好看懂的。

utils -> intro.js

import introJs from 'intro.js'
import 'intro.js/introjs.css';
import router from '@/router'
import store from '@/store'

let count = 0 // 初始化为0，后面会根据每一步传入的dom的id选择器 判断当前在第几步
let state = 0 // skip: 0 ,done: 1；
export function guide (introSteps) {
   
  // console.log(sessionStorage.getItem('isIntro'))
  if (!parseInt(sessionStorage.getItem('isIntro'))) {
   
    return
  }
  introJs().setOptions({
   
    steps: introSteps,
    /* 当位置选择自动的时候，位置排列的优先级 */
    positionPrecedence: ["top", "bottom", "right", "left"],
    prevLabel: "上一步",
    nextLabel: "下一步",
    skipLabel: "跳过"