vue keep-alive 详情页返回列表页记录浏览位置

本文主要实现列表页跳转详情页，返回列表页时回到上次滚动位置。

设置router添加name值和meta.keepAlive值。

router.js

vue 版本大于 2.1.0时候可以使用 include 和 exclude。这里需要注意的是，一定要在页面添加name属性。我们后面需要根据router去动态设置arr数组，所以我们这里需要在router里也设置name并且与页面保持一致
app.vue

<template>
  <div id="app">
     <keep-alive :include="arr">
           <router-view  v-if="isRouterAlive"/>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name:'app',
  data(){
    return{
      isRouterAlive:true,
      arr:['Home','about'] // 缓存页面。数组里面可以添加多个需要缓存的页面。
    }
  },
  // 缓存列表页记录当前滑动位置。
  watch: {
    // 监听router
    $route: function(to, from) {
      if (from.meta.keepAlive) {
        this.arr.includes(from.name) || this.arr.push(from.name)
      } else {
        var name = from.name
        if (this.arr.includes(name)) {
          var index = this.arr.findIndex(function(item) {
            return item === name
          })
          this.arr.splice(index, 1)
        }
      }
      if (to) {
        switch (to.name) {
          // 需要缓存的页面
          case 'Home':
          case 'about':
            this.arr.includes(to.name) || this.arr.push(to.name)
            break
          default:
            break
        }
      }
      // console.log(`从${from.name}去${to.name},缓存页面有： ${this.arr}`)
    }
  },
}
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif; 
  // background: url(../public/img/votbeijing.png) no-repeat center center;
  background: rgb(188, 178, 197);
  background-size: cover;
  background-attachment: fixed;
}


</style>

Home.vue

export default {
     name: "Home",   // 一定要加name
  		data(){
          return{
          }
    }
  }

温馨提示
缓存页面加完keep-live如果出现其他冲突和bug，可能要从activated和deactivated 这俩个生名周期钩子函数解决了。
activated 进入时触发
deactivated 离开时触发。