如何使用Bootstrap-Tour和动态路径处理多页面浏览？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-tour@0.12.0/build/css/bootstrap-tour.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-tour@0.12.0/build/js/bootstrap-tour.min.js"></script>

var tour = new Tour({
  steps: [
    {
      element: "#step1",
      title: "Step 1",
      content: "This is the first step of the tour."
    },
    {
      element: "#step2",
      title: "Step 2",
      content: "This is the second step of the tour."
    },
    // 添加更多的步骤...
  ]
});

$(document).ready(function() {
  tour.init();
  tour.start();
});

// 在导览步骤中添加路径信息
var tour = new Tour({
  steps: [
    {
      element: "#step1",
      title: "Step 1",
      content: "This is the first step of the tour.",
      path: "/page1" // 添加路径信息
    },
    {
      element: "#step2",
      title: "Step 2",
      content: "This is the second step of the tour.",
      path: "/page2" // 添加路径信息
    },
    // 添加更多的步骤...
  ]
});

// 处理动态路径
function handlePath() {
  var currentPath = window.location.pathname;
  tour.goTo(currentPath);
}

// 监听URL变化
$(window).on("popstate", function() {
  handlePath();
});

// 页面加载完成后启动导览并处理路径
$(document).ready(function() {
  tour.init();
  handlePath();
  tour.start();
});