barba.jsを利用したときにbarba-wrapperの外のリンクが変になる

###困っていること

barba.jsのv2を利用したときにv1で利用できたclass="no-barba"が使えなくて困っています。（仕様変更？と思って公式ドキュメントを見たのですが、知識が浅くよくわかりませんでした。）
再現コード置いておきます。

index
1<head>
2  <meta charset="UTF-8">
3  <title>TOP｜Barba.js DEMO</title>
4  <script src="https://unpkg.com/@barba/core"></script>
5</head>
6<body>
7
8    <a href="test.html" class="no-barba">ヘッダー的なもの（testに飛ぶ）</a>
9    <div data-barba="wrapper">
10        <div data-barba="container" data-barba-namespace="home">
11      ここはindex
12      <a href="about.html">aboutへ移動</a>
13  </div>
14</div>
15
16<script src="./app.js"></script>
17</body>

about
1<head>
2  <meta charset="UTF-8">
3  <title>TOP｜Barba.js DEMO</title>
4  <script src="https://unpkg.com/@barba/core"></script>
5</head>
6<body>
7    <div data-barba="wrapper">
8        <div data-barba="container" data-barba-namespace="home">
9    ここはabout
10      <a href="index.html">indexへ移動</a>
11  </div>
12</div>
13<script src="./app.js"></script>
14</body>

test
1<head>
2  <meta charset="UTF-8">
3  <title>TOP｜Barba.js DEMO</title>
4</head>
5<body>
6    <a href="index.html">ここはtest</a>
7</body>

js
1barba.init();

index⇆about間の非同期通信はちゃんと行われていますが、「ヘッダー的なもの」からtest.htmlに移動することができません。

v1のときはちゃんとできていたんですが…

解決方法がわかる方いたらよろしくお願いいたします。

行動規範の内容に同意します

回答1件

javascript
1var ignoreClasses = ['ab-item','custom-no-barba']; // ここにclass名(no-barba)を入れる
2for (var i = 0; i < ignoreClasses.length; i++) {
3    if (element.classList.contains(ignoreClasses[i])) {
4        return false;
5    }
6}

を追加していただければno-barba のような動きが適応されると思います。

こちらに詳しい内容が記載してあります。
https://www.willstyle.co.jp/blog/1722/#sec6

投稿2020/02/09 08:30

jackmiwamiwa

総合スコア395

sodiumplus3

2020/02/09 17:11

追加するとindex.htmlとabout.html間の非同期通信が行われなくなってしまいます…

jackmiwamiwa

2020/02/10 04:24

こちらのような感じではいかがでしょうか？こちらでしたらv2でも思っているような動きができると思います。 ```javascript barba.init({ //ここに無効にする条件を書く prevent: ({ el }) => el.getAttribute('href').slice(0,1) === '#' }); ``` ```html  <a href="#target" data-barba-prevent>ページ内リンク</a>  <div data-barba-prevent="all"> <a href="#target1">ページ内リンク1</a> <a href="#target2">ページ内リンク2</a> <a href="#target3">ページ内リンク3</a> </div> ``` くわしくはこちらに記載されています。 [https://notes.sharesl.net/articles/50/#i-4](https://notes.sharesl.net/articles/50/#i-4)

sodiumplus3

2020/02/10 05:10

`prevent: ({ el }) => el.getAttribute('href').slice(0,1) === '#'`などをつけなくても`data-barba-prevent`をaに付け足したらちゃんとページ外遷移できるようになりました！個人的にはclass='no-barba'とdata-barba-preventが同等の働きをしているイメージなのですが合っていますかね…？何れにせよ、一旦解決しましたありがとうございます。

jackmiwamiwa

2020/02/10 14:00

``` barba.init({ //ここに無効にする条件を書く prevent: ({ el }) => el.getAttribute('href').slice(0,1) === '#' }); ``` の場合、 <a href='#target'>リンク</a>のような最初に「#」がある場合、「class='no-barba'」と同等の動きをしている認識です。 ```html  <a href="#target" data-barba-prevent>ページ内リンク</a>  <div data-barba-prevent="all"> <a href="#target1">ページ内リンク1</a> <a href="#target2">ページ内リンク2</a> <a href="#target3">ページ内リンク3</a> </div> ``` の場合だと「data-barba-prevent」属性をつけた場合のものが「class='no-barba'」と同等の動きをしている認識で大丈夫です。ですので、追加するものはjsかhtmlのお好きな方で大丈夫です。

行動規範の内容に同意します