为什么Swiper中的hashNavigation组件会替换URL中的整个路径？

Question

我想启用对 Swiper 轮播中图像的深层链接。 "hashNavigation" 组件似乎是为此目的而构建的，但我看不出如何让它工作。当我启用它并在我的幻灯片中提供 data-hash 属性时，它会用我提供的哈希值替换整个路径。显然，这使得它对于不在主页上的任何滑动器都无用。我如何才能将它 append 哈希添加到路径而不是替换它？这是我实例化它的代码：

var vis = document.getElementById('vis'),
swiperOpts = {
  loop: true,
  slidesPerView: 1,
  mousewheel: true,
  hashNavigation: {
    watchState: true,
    replaceState: true,
  },
  autoplay: {delay: 4444}
},
swiper = new Swiper(vis, swiperOpts);

还有一个标记示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<base href="/">

<link rel="preconnect" href="//cdnjs.cloudflare.com">
<link rel="preconnect" href="//unpkg.com">
<link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
</head>

<body class="visio">
<main>
<div class="swiper-container" id="vis">
<ul class="swiper-wrapper">
  <li class="swiper-slide" data-hash="235" style="">
      <p>slide one</p></li>
  <li class="swiper-slide" data-hash="228" style="">
      <p>slide two</p></li>
  <li class="swiper-slide" data-hash="224" style="">
      <p>slide tre</p></li>
  <li class="swiper-slide" data-hash="227" style="">
      <p>slide for</p></li>
  <li class="swiper-slide" data-hash="236" style="">
      <p>slide fiv</p></li>
</ul>
        </div>
    </main>
<script src="//unpkg.com/swiper/js/swiper.min.js"></script>
</body></html>

以下是我看到的 URL 的一些示例：

基地URL：domain.com/visio/sol
幻灯片数据哈希值：224
URL Swiper 修改后：domain.com/#224

Answer 1

我一直无法让它正常工作，但我使用以下代码解决了这个问题：

let initIDX = 0;
if(window.location.hash){
    let lmnt = document.querySelector('[data-hash="'+window.location.hash.substring(1)+'"]'),
    i = 0;

    while((lmnt = lmnt.previousSibling) != null) if(lmnt.nodeType == 1) ++i;

    initIDX = i;
}

var vis = document.getElementById('vis'),
    swiperOpts = {
        loop: true,
        slidesPerView: 1,
        initialSlide: initIDX,
        on:{
            slideChangeTransitionEnd: function(){
                history.replaceState(null, null,
                    window.location.pathname + '#' + this.slides[this.activeIndex].dataset.hash);
            }
        }
    },
    swiper = new Swiper(vis, swiperOpts);

这对我有用。

为什么Swiper中的hashNavigation组件会替换URL中的整个路径？

Why does the hashNavigation component in Swiper replace the entire path in the URL?

javascript

swiper