web-dev-qa-db-ja.com

Vue.jsは同じルートのページの上部にスクロールします

このようにVue.jsルーターにスクロール動作を設定できます。

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

これは、最新ではないページのリンクをクリックすると完全に機能します。すでにレンダリングされているリンク、つまりフッター内をクリックしても、何も起こりません。 Vueルーターは、状態遷移がないと想定します。この場合にスクロールアップするための好ましい方法は何ですか？

vue.jsvue-router
20
kuceram

このトラフvue-routerはできません。ただし、すべてのルーターリンクにscroll to topメソッドを追加できます。

メソッドを作成するだけです

 methods: { 
           scrollToTop() {
                window.scrollTo(0,0);
           }
        }

そして、リンクに追加します

<router-link @click.native="$scrollToTop">

フッターの外側でも使用したい場合は、Vueプロトタイプに追加することをお勧めします

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

100％のソリューションではありませんが、最もシンプルなソリューションです

34
Vitaly Migunov

スクロールの動作がまったく機能しないこの質問に来ている人々にさらに追加するために、この質問に答えたいと思いました。

上記のソリューションのどれも動作させることができず、本当にイライラしていました。

私のために働いたのは以下でした：

const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }
})

VueJsアプリを#appにマウントして、アプリが存在し、選択できるようにします。

4
Sweet Chilly Philly

必要に応じて、behavior: smoothを使用できます。

moveTo () {
  let to = this.moveToDown
    ? this.$refs.description.offsetTop - 60
    : 0

  window.scroll({
    top: to,
    left: 0,
    behavior: 'smooth'
  })

  this.moveToDown = !this.moveToDown
}
1
PJ.Wanderson

このNiceコンポーネントを使用してください： https://www.npmjs.com/package/vue-backtotop

<back-to-top text="Back to top"></back-to-top>
0
Sinan Eldem