Vue点击页面详情后返回，停留在原始位置，且不刷新（使用keep-alive实现）

场景：
pageOne页面是一个商品列表页面，在这个页面点击商品，就会跳转到pageTwo商品详细页面。此时再从pageTwo页面返回到pageOne页面时，pageOne页面需要做到：
1.记录pageOne之前的滚动的距离。2.不重新请求数据。
注意：
只有从详情列表跳回商品列表，需要keepAlive，其他页面跳到商品列表页需要重新加载。
所以需要动态定义$route.meta.keepAlive的值。

keep-alive

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

App.vue

<template>
  <div class="page-one" ref="pageOneContainer">
    <p v-for="item in 20" :key="item">测试</p>
  </div>
</template>
<template>
    <div id="app">
		<!-- 使用keep-alive是为了缓存page-one组件内部scroll的值 -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

pageOne.vue

<script>
export default {
  name: '',
  data () {
    return {
      scroll: 0
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === 'pageTwo') {
      next(vm => {
        const pageOneContainer = vm.$refs.pageOneContainer
        // 记录滚动高度
        pageOneContainer.scrollTop = vm.scroll
        // 不重新请求数据
        vm.notFetchData()
      })
    } else {
      next(vm => {
        const pageOneContainer = vm.$refs.pageOneContainer
        // 不记录滚动高度
        pageOneContainer.scrollTop = 0
        // 重新请求数据
        vm.fetchData()
      })
    }
  },
  beforeRouteLeave (to, from, next) {
   if (to.name === 'orderDetail') {
     from.meta.keepAlive = true;
        let myOrderContainer = this.$refs.myOrderListPage;
        this.scroll = myOrderContainer.scrollTop;
    } else {
        from.meta.keepAlive = false;
    }
    next()
  },
  methods: {
    fetchData () {
      console.log('need flash')
    },
    notFetchData () {
      console.log('do not need flash')
    }
  }
}
</script>

pageTwo.vue

// 从订单详情页返回订单页的时候，把订单页的keepAlive值设置为true
beforeRouteLeave (to, from, next) {
    if (to.name == 'pageOne') {
        to.meta.keepAlive = true;
    }
    else{
        to.meta.keepAlive = false;
    }
    next();
},