vue実装詳細ページはリストページに戻り、データはロードされず、ページの元の位置は変わらない

一般的なニーズ:
[リストページ]========>[リストの詳細]ページにジャンプ=============>>をクリックして、リストページに戻ります(ページを再ロードせずに、元のブラウズの場所を保持します).
1.ページの再ロードを行わない
vueのkeep-alive を使用してダイナミックコンポーネントをラップすると、それらを破棄するのではなく、アクティブでないコンポーネントインスタンスがキャッシュされます.つまり、いわゆる1回目のページへのロードではなく、2回目のページへのロードを返します.
app.vue:

	<keep-alive>
		<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>

router-viewは参照ページ(コンポーネントでもページを指す)を表し、$route.meta.keepAliveは現在のページのmetaのkeepAlive属性がtrueであるかどうかを表し、この属性がtrueである場合にのみkeep-aliveの形式を採用する
直接routerでjsでmetaを設定します.ここでは簡略化版です.

		{
            path: '/detail',
            component: detail
        },
        {
            path: '/list',
            component: list,
            //   meta
            meta: {
                keepAlive: true
            }
        },

最良の使用を返す

this.$router.back()

2.実現ページが元の位置に戻る
詳細ページ注意beforeRouteEnterはrouterページが入る前を表しているので、コンテキストはthisではなく、矢印関数+vmの形式でthis.$refs.medicalListContainerはスクロールするボックスを表していますが、windowなどスクロールするボックスnext()はページの実行を継続することを表しており、不可欠です.

 // router     ，         
  beforeRouteLeave(to, from, next) {
    this.scroll = this.$refs.medicalListContainer.scrollTop;
    next()
  },
  //      
  beforeRouteEnter(to, from, next) {
     next(vm => {
        vm.$refs.medicalListContainer.scrollTop = vm.scroll;
      })
  }

3.ページにデータをロードしないで、リストの内容が変更された場合
例えば、音楽リストは、リスト項目をクリックして詳細ページに入り、詳細ページで再生をクリックしてリストページに戻り、ページが更新されず、元の位置を保持しますが、ある項目の音楽記号は再生リストページに変わります.

div class="list-item" v-for="(item, index) in list" :key="index">
    <div class="list-item-left">
         <span   :class="{'active-text': item.id == playingId && playerStatus"
            >{{item.title | subTitle(15)}}</span>
          </div>

detailページdetailページの再生状態とリスト項目idを格納する必要があります

  window.localStorage.setItem('audioId', this.playingId);
  window.localStorage.setItem('audioPlayStatus', this.audioPlayStatus);

もしあなたがapp内にH 5を埋め込む方式を使っていて、あなたがまたページが戻る前に保存しているならば、私たちはH 5ボタンをクリックして戻るようにユーザーのクリック動作をキャプチャすることができなくて、先にthis.$router.back()を使って戻ることを保存して、しかしbeforeDestroyを使って、ページが破棄される前に処理することができます

beforeDestroy() {
  window.localStorage.setItem('audioId', this.playingId);
  window.localStorage.setItem('audioPlayStatus', this.audioPlayStatus);
  }

リストページで必要なパラメータを取得すると、ページが自然に変化します.

//      
  beforeRouteEnter(to, from, next) {
    //          ，          ，         
    if (from.path == '/detail') {
      next(vm => {
        vm.playingId =  window.localStorage.getItem('audioId');
        if (vm.playingId) {
          //         audioPlayStatus: 1 --     0 --    （string   ）
          vm.playerStatus = window.localStorage.getItem('audioPlayStatus')
        }
      })
    } else {
      next();
    }
  }

4.初回ロードと戻りリストを更新せずに処理する関数
Activatedがkeep-aliveキャッシュされたコンポーネントによってアクティブ化されたときに呼び出されます.(keep-aliveによってcreatedに直接書くことができなければ)例えばwebview(app内埋め込みH 5ページ)では、私たちはページで原生と対話し、原生のフィードバックを傍受しなければならない.

 // activated    keep-alive   ，     ，     activated  
  activated() {
     //           
    window.playPause = function(status) {
      if (status == "pause") {
        this.playerStatus = 1;
      } else {
        this.playerStatus = 2;
      }
    }.bind(this);
  },