Vue-Routerのスクロール動作の詳細説明

今回は、Vue-Router のスクロール 動作 の使用方法と、Vue-Router のスクロール 動作を使用する際の 注意事項 について詳しく説明します。以下は実際のケースです。見てみましょう。

スクロール動作

フロントエンド ルーティングを使用して、新しいルートに切り替えるときに、ページをリロードするのと同じように、ページを一番上までスクロールするか、元のスクロール位置を維持する必要があります。 vue-router でも実行できますが、ルートを切り替えるときにページがスクロールする方法をカスタマイズできます。

注:

この機能は、HTML5 履歴モードでのみ使用できます。 Router インスタンスを作成するときに、scrollBehavior メソッドを提供できます:

var router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior メソッドは、ルーティング オブジェクトとの間で送受信を行います。 3 番目のパラメータ SavedPosition は、popstate

Navigation

(ブラウザの進む/戻るボタンによってトリガーされる) の場合にのみ使用できます。 このメソッドは、次のようなスクロール位置のオブジェクト情報を返します:

{ x: 数値, y: 数値 }

• { セレクター: 文字列 }
false のブール値が返された場合、または空のオブジェクトが返された場合、スクロールは行われません。

例:

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

すべてのルート ナビゲーションでは、ページを一番上までスクロールするだけです。

戻る/進むボタンを押すと、savedPosition に戻り、ブラウザのネイティブ動作のように動作します:

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

「スクロールしてアンカー」の動作をシミュレートしたい場合:

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Three.js の使用方法の詳細な説明

vue で Particles.js ライブラリを使用する方法

以上がVue-Routerのスクロール動作の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。