Javascript 页面转换错误的Barba.js:"；“推送状态尝试失败”；

我正在试验Barba.js的页面转换。当我尝试运行此代码时，会收到一条“阻止尝试使用history.pushState（）更改会话历史URL”错误消息。我相信这与DOM有关。我是一个JS新手，任何帮助都将不胜感激。下面我附上了代码。谢谢

HTML:

CSS:

---

确保使用Web服务器运行代码，否则无法使用推送状态

  <div id="barba-wrapper">
    <div class="barba-container">

  <div class="page1">
    <h1>Welcome to Homepage</h1>
    <a href="about/index.html">About</a>
  </div>
 </div>
</div>

  <div id="barba-wrapper">
    <div class="barba-container">

  <div class="page2">
    <h1>Welcome to About</h1>
    <a href="../index.html">Home</a>
  </div>
  </div>
 </div>

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend({
  start: function() {

Promise
  .all([this.newContainerLoading, this.fadeOut()])
  .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {

  },

  fadeIn: function() {
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function(){
  that.newContainer.classList.remove("slide-in");
  that.done();
    });
  }
});



Barba.Pjax.getTransition = function() {

  return FadeTransition;
};

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body
{
  font-family: sans-serif;
  overflow: hidden;
}
.page1,
.page2
 {
 height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  flex-direction: column;
  position: absolute;
}
a{
  color: white;
  text-decoration: none;
  margin-top: 50px;
  border: 1px solid white;
  padding: 10px 30px;
}
.page1
{
  background-color: rgb(129, 60, 146);
}
.page2
{
  background-color: rgb(73, 60, 146);
}

.slide-in
{
  animation: slide-in 0.5s ease forwards;
}

@keyframes  slide-in
{
  from
  {
    transform: translateX(100%);
    visibility: visible;
  }
  to
  {
    transform: translateX(0%);
  }
}