vueブラウズ位置の記録

vueにブラウズ位置を記録する方法シーンの説明:現在のページブラウズ時にクリックして他のページに入り、戻ったときにブラウズ時の位置にスクロールしたい
ソリューション:

ローカルストレージ(またはクッキー)

を利用する.

は、Storage(ローカルストレージ)を用いる、他のページに入る前に現在のスクロール位置

を記録する.

// some click event
let scrollTop = targetDom.scrollTop
sessionStorage.setItem('scrollTop', scrollTop)

がページに戻るときに前回の位置を取得しdomのスクロール位置

を再設定する.

import { domSetScrollTop } from '@/utils/dom.js'

// vue    mounted
mounted:{
  let scrollTop = sessionStorage.getItem('scrollTop')
  if(!scrollTop) {
       scrollTop = 0
  }
  domSetScrollTop(this.$refs.content, scrollTop)
}

// utils/dom.js
export function domSetScrollTop(dom, scrollTop) {
  dom.scrollTop = scrollTop
}

欠点:現在のページに戻ると、ローカルストレージを取得するときに時間が無駄になり、ページレンダリングの時間が無駄になり、前回の位置に戻るのが正確ではありません.そこで、次のような方法で実現しました.
2 . vueルーティングのメタ情報を用いて格納する(vuexを用いたグローバルでも格納可能であり,実験なしでは一つの考え方とすべきである)

// CurrentPage.vue
// utils
import { domSetScrollTop } from '@/utils/dom.js'
//mixins
import { metaScroll } from '@/components/mixins/metaScroll'
  
 mixins:[metaScroll], //    
 methods:{
    handleClick(sku_id){
      this.setRouteMeta('scrollTop', this.$refs.content.scrollTop)
      this.$router.push({name:'ProfilePicture',params: { id }})
    },
    _setScrollTop(){
        let scrollTop = this.getRouteMeta().scrollTop
        if(!scrollTop) {
          scrollTop = 0
        }
     domSetScrollTop(this.$refs.content, scrollTop)
    },
  },
  mounted() {
    this._setScrollTop()
  },

// mixins/scrollTop.js
export const metaScroll =  {
  methods:{
    getRouteMeta() {
      return this.$route.meta
    },
    setRouteMeta(attribute, val){
      this.$route.meta[attribute] = val
    }
  }
}

// utils/dom.js
export function domSetScrollTop(dom, scrollTop) {
  dom.scrollTop = scrollTop
}

// router/index.js
{
    path: '/CurrentPage',
    name: 'CurrentPage',
    component: CurrentPage,
    meta:{
      scrollTop:0
    }
},

3 . vue-routerを使用したスクロール動作
スクロール動作
フロントエンドルーティングを使用して、新しいルーティングに切り替えると、ページを再ロードするように、ページを上部にスクロールしたり、元のスクロール位置を維持したりします.vue-routerは、ルーティング切り替え時にページがどのようにスクロールするかをカスタマイズすることができます.
注:この機能は、history.pushStateをサポートするブラウザでのみ使用できます.
Routerインスタンスを作成すると、scrollBehaviorの方法を提供できます.

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

scrollBehaviorメソッドは、toおよびfromルーティングオブジェクトを受信する.3番目のパラメータsavedPositionは、ブラウザの前進/後退ボタンによってトリガーされたpopstateがナビゲートされた場合にのみ使用可能である.
このメソッドは、スクロール位置のオブジェクト情報を返します.

{ x: number, y: number }

{ selector: string, offset? : { x: number, y: number }}(offsetは2.6.0+でのみサポート)

falsy(falsyは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
    }
  }
}

また,ルーティングメタ情報を用いてスクロールをより細かく制御することもできる.完全な例を表示するには、ここを移動してください.
非同期スクロール
2.8.0新規
Promiseに戻って、予想される位置の説明を得ることもできます.

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

ページレベルの遷移コンポーネントからのイベントにマウントし、スクロール動作をページ遷移とともに良好に動作させることができます.しかし,使用例の多様性と複雑性を考慮すると,この元のインタフェースのみを提供し,異なるユーザシーンの具体的な実装をサポートする.