订单列表页面到订单详情页面，再回订单列表页面，页码不变

Question

怎么从订单列表页面到订单详情页面，再回订单列表页面，页码不变？
比如：从订单列表页面第4页点击一个订单详情，再回到订单列表页面，页码还是第4页？

Answer 1

动态缓存路由，通过动态改变keepAlives来实现，存储的值是name，页面和路由的name

<!-- app.vue -->
<template>
  <keep-alive :include="keepAlives">
    <router-view></router-view>
  </keep-alive>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'index',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['keepAlives'])
  }
}
</script>

页面通过beforeRouteEnter beforeRouteLeave，在列表页进入详情页时，缓存列表页，进入其它页面则不缓存

// 列表页
beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$store.commit('SET_KEEP_ALIVE', ['Financial'])
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === 'DemoDetail') {
      this.$store.commit('SET_KEEP_ALIVE', ['Financial'])
    } else {
      this.$store.commit('SET_KEEP_ALIVE', [])
    }
    next()
  }

// store
export default {
  state: {
    keepAlives: []
  },
  mutations: {
    SET_KEEP_ALIVE (state, keepAlives) {
      state.keepAlives = keepAlives
    }
  },
  actions: {
    setKeepAlive ({ commit }, keepAlives) {
      commit('SET_KEEP_ALIVE', keepAlives)
    }
  },
  getters: {
    keepAlives (state) {
      return state.keepAlives
    }
  }
}

大概就是以上思路