vue keep-alive应用场景及如何使用

一、应用场景：

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置，这个时候就需要保存状态，要缓存状态。
概括来讲：

1、列表页面 ——进入详情页 —— 后退到列表页（缓存列表页的原来数据以及滚动位置）

2、重新进入列表页面，获取最新的数据

 

二、如何使用

在vue2.1.0版本之后的使用方法(推荐方法)

1、创建router实例的时候加上scrollBehavior方法

//在router中的index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to,from,savedPosition){
    if (savedPosition){
      return savedPosition
    }else{
      return{
        x:0,
        y:0
      }
    }
  }
})

2、在store里加入需要缓存的的组件的变量名，和相应的方法

export default new Vuex.Store({
  state: {
    includeList:[]
  },
  mutations: {
    get_include(state,data){
      state.includeList = data;
    }
})

3、在App.vue中

<!-- include 需要缓存的组件 -->
<keep-alive :include="includeList">
      <router-view />
</keep-alive>


<script>
    import { mapState } from 'vuex';
    export default {
        name: 'App',
        data() {
            return {
           
            }
        },
        computed: {
            ...mapState(['includeList'])
        },
        created() {

        }
    }
</script>

 4、在beforeRouteLeave钩子函数里控制需要缓存的组件

注意beforeRouteLeave导航守卫是必须写在当前单页面中，不能写在App.vue中

beforeRouteLeave(to, from, next) { 
        //跳转到详情页时缓存当前列表页，反之不缓存
        if (to.path === '/GoodDetail') { 
            this.$store.commit('get_include', ['Home'])
        } else {
            this.$store.commit('get_include', [])
        }
        next()
    },

此方法将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存，不需要每次再重新初始化数据，但是需要在vuex中保存数据；

 

在vue2.1.0版本之前使用方法

1、meta标签中记录keepAlive的属性为true

2、 创建router实例的时候加上scrollBehavior方法

//在router中的index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to,from,savedPosition){
    if (savedPosition){
      return savedPosition
    }else{
      return{
        x:0,
        y:0
      }
    }
  }
})

3、在App.vue中 

//App.vue中
<keep-alive>
   <router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>

 4、有些情况下需要缓存有些情况下不需要缓存，可以在缓存的组件里的路由钩子函数中做判断

注意beforeRouteLeave导航守卫是必须写在当前单页面中，不能写在App.vue中

beforeRouteLeave (to, from, next) {
    if (to.path === '/goodDetail') {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
     // this.$destroy()
    }
    next()
  },

但是这种方法有bug，首先第一次打开页面的时候并不缓存，即第一次从列表页跳到详情页，再回来并没有缓存，后面在进入详情页才会被缓存。
并且只会缓存第一次进入的状态，不会重新请求数据，如果当页面A选中一个分类跳到B页面，再从B列表页面跳往详情页，此时会缓存这个状态，并且以后再从A页面的其他分类跳到B页面都不会重新被缓存，以至于每次从详情页返回B页面都会跳第一次缓存的状态；当你的项目只有一种状态需要缓存，可以考虑使用这种方法 

 

参考资料：https://www.cnblogs.com/mary-123/p/11248178.html

本文地址：https://blog.csdn.net/u014678583/article/details/107387891