web-dev-qa-db-ja.com

Vue.jsはsetTimeoutの後、新しいページルートの一番上までスクロールします

新しいルートの最上部へのスクロールが瞬時の場合、うまく動作しないページ遷移があります。 100ミリ秒待ってから、自動的に最上部にスクロールします。次のコードは、まったくスクロールしません。これを行う方法はありますか？

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        setTimeout(() => {
            return { x: 0, y: 0 }
        }, 100);
    }
})
vue.jsvue-router
13
frosty

これはVueでネイティブにサポートされています。次のようにscrollBehaviourを使用してください。

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ],
  mode: 'history'
});

詳細はこちら 。

35
Edgar Quintero

他の回答では、次のようなEdgeのケースを処理できません。

  1. 保存位置 -保存位置は、ユーザーが前後の位置をクリックしたときに発生します。ユーザーが見ている場所を維持したい。
  2. ハッシュリンク -例http://example.com/foo#barは、idがbarであるページ上の要素に移動する必要があります。
  3. 最後に、他のすべてのケースでは、ページの上部に移動できます。

上記のすべてを処理するサンプルコードを次に示します。

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return { x: 0, y: 0 };
    }
  }
});
13
Muhammad Rehan Saeed

これをすべてのルートで実行したい場合は、ルーターで hook の前に実行できます。

const router = new VueRouter({ ... })

router.beforeEach(function (to, from, next) { 
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
    next();
});

古いバージョンのvue-routerを使用している場合は、次を使用します。

router.beforeEach(function (transition) { 
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
    transition.next();
});
9
PatDuJour

これはおそらく最良の方法ではありませんが、追加する

_document.body.scrollTop = document.documentElement.scrollTop = 0;_

ルートのコアコンポーネントの（この場合、Home）mounted()関数は、私が望むものを実現します。

0
frosty

これはどうですか ？

router.beforeEach(function (to, from, next) {
  window.scrollTo(0, 0)
  next()
})
0
l2aelba

クライアント側のルーティングを使用する場合、新しいルートに移動するときに先頭にスクロールするか、実際のページの再読み込みと同様に履歴エントリのスクロール位置を保持することができます。 vue-routerを使用すると、これらを達成でき、さらに優れた方法で、ルートナビゲーションのスクロール動作を完全にカスタマイズできます。

注：この機能は、ブラウザがhistory.pushState。

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

保存位置あり：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

詳細

0
siva hari