Vue scrollBehaviorのスクロール挙動は、前回のブラウズ位置に後退ページを表示することを実現します。

前提:
前にkeep-Aliveコンポーネントについて書きましたが、現在リストページが詳細ページに入った後、バックリストに戻り、前回訪問した位置（原理はキャッシュリストページのデータで実現されます）を表示します。キャッシュの方法は、データの更新が間に合わなくなり、ページエラーが発生します。例えば、商品の質問に対して、バックグラウンドで答えた後、内容を修正してはいけません。フロントの更新が間に合わないと、編集できますが、実際の状態は編集できません。
プロフィール:
先端ルートを使って、新しいルートに切り替えた時、ページを上に転がしたり、元のスクロール位置を維持したりして、ページを再読み込みするようにします。vue-routerは、より良いことができますが、それはあなたが自分で指定したルートを切り替える時のページをどのようにスクロールできますか？
注意：この機能は history.pushState をサポートするブラウザでのみ使用できます。
公式文書の概要：スクロールの挙動
使用方法:

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 // return           
 }
})

または統合モードの書き方：
utils.js

export function scrollBehavior (to, from, savedPosition) {
 // return           
}

index.js

import Vue from 'vue'
import Router from 'vue-router'
import { scrollBehavior } from './utils'
Vue.use(Router)
const router = new Router({
 mode: 'history',
 scrollBehavior,
 routes: [
 ...routesPC,
 ...routesMO
 ]
})
export default router

scrollBehavior方法でtoとfromルーティングオブジェクトを受信する。第3のパラメータsavedPositionは、popstateナビゲーション（ブラウザの前進/後退ボタンでトリガする）の場合にのみ使用できます。
この方法では、ルーティングto，fromの2つのオブジェクトを判断することにより、必要な判断を行うことができる。
savedPositionパラメータは最後のスクロール位置を記録します。return {x:number,y:number}を通じてページのスクロールの位置を制御する。
すべてのルートナビゲータに対して、ページを上にスクロールさせます。

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

後退時に前回のスクロール位置にスクロールしたいです。条件を満たすと、savedPositionに値がある場合：

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

追加状況：非同期スクロール
ページデータがロードを要求して遅延がある場合、ページが直接スクロールされると、ページデータ要求が戻り、DOMが再レンダリングされ、スクロールが無効になる場合。
したがって、公式文書は非同期スクロールの方法を追加しました。

scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve({ x: 0, y: 0 })
  }, 500)
 })
}

これは帰った後、一定の遅延があって、また転がります。自分のプロジェクトの具体的な状況によって、一定の修正ができます。互換性があります。
注：私のプロジェクトのmobile端末のデータローディングはvue-mugen-scrollスライドローディングデータセットを使っていますが、ネット上ではローディングをトリガする方法が見つかりませんでした。だから、リストページに戻ってから、データの更新は一ページだけです。最後までスクロールしても、前回のデータが見つけられません。使用状況によっては、制限がありますので、記録して準備してください。
締め括りをつける
上记は小编で绍介したVue scrollBehaviorのロールバックを実现しました。前回ご覧になった位置に表示されます。皆さんに助けてほしいです。もし何かご质问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。