欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 15:17:00
一、应用场景:在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置,这个时候就需要保存状态,要缓存状态。概括来讲:1、列表页面 ——进入详情页 —— 后退到列表页(缓存列表页的原来数据以及滚动位置)2、重新进入列表页面,获取最新的数据二、如何使用在vue2.1.0版本之后的使用方法1、创建router实例的时候加上scrollBehavior方法//在router中的index.jsconst router = new VueRout....

一、应用场景:

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

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()
    },

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

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

 

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

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

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

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()
  },

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

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

 

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

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

相关标签: vue keep-live vue