web-dev-qa-db-ja.com

Vue.jsは、同じコンポーネント内のdivにアンカーします

Vue.jsアプリケーションを開発していますが、コンポーネント内の特定のdivにアンカーをリンクするのに問題があります。

次のアンカーがあります。

<a href="#porto" class="porto-button">Porto, Portugal</a>

および次のdiv：

<div id="porto" class="fl-porto">

ハッシュモードでvue-routerを使用しています。

問題は、「porto-button」をクリックすると、「home」ページ（ '/'）にリダイレクトされることです。

Vue.js 1.Xを使用しており、履歴モード（ハッシュバングのないURL）を使用しようとしましたが、cannot GET '/page'ページの更新時のエラー。

私は何か間違っていますか？これについて何ができますか？

htmlvue.jsvue-router
10
fmlopes

ルーターをハッシュモードで使用しているため、/#somethingにスクロールすると実際に「何か」ページにリダイレクトされるため、簡単にスクロールすることはできません。

スクロール動作を自分でエミュレートする必要があります。そのようなことを試してください。

//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.

//Your view:
<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">

//Your code:
methods: {
  scrollMeTo(refName) {
    var element = this.$refs[refName];
    var top = element.offsetTop;

    window.scrollTo(0, top);
  }
}

使い方：

  1. ref属性を使用して、スクロール先の要素に参照を設定します。
  2. window.scrollYを参照される要素のtopにプログラムで設定する関数を作成します。
  3. ジョブが完了しました:)

更新1：

jsfiddle https://jsfiddle.net/5k4ptmqg/4/

更新2：

Vue 1 ref="name"はel:name（docs） のように見えました。更新された例は次のとおりです。

https://jsfiddle.net/5y3pkoyz/2/

18
euvl

私のために働いたもの

<router-link to="#leaders">Leaders</router-link>

または動的

<router-link :to="`#${subMenuItem.linkTarget}`" class="page-submenu-list__link">
                    {{subMenuItem.linkTitle}}
                </router-link>

ルーター内

routes:[],
scrollBehavior (to, from, savedPosition) {
    //https://router.vuejs.org/guide/advanced/scroll-behavior.html
    if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
  }
6
Arlan T

別の方法は、「scrollIntoView（）」を使用することです

そのため、メソッドをわずかに変更する場合を除き、euvlのコードはまだ有効です。


    new Vue({
      el: '#app',
      methods: {
        goto(refName) {
            var element = this.$els[refName];
          element.scrollIntoView();
        }
      }
    })

凝ったものにしてスクロールをスムーズにしたい場合は、以下を追加することもできます：

element.scrollIntoView({ behavior: 'smooth' });

これには、古いブラウザ用のポリフィルが必要になることに注意してください。

0
Cathy Ha