vue页面缓存--动态keep-alive

最新推荐文章于 2024-05-30 15:55:44 发布

Tiger_wa

最新推荐文章于 2024-05-30 15:55:44 发布

阅读量268

点赞数

分类专栏： JavaScript Vue Vuex 文章标签： keep-alive

本文链接：https://blog.csdn.net/qq_38136543/article/details/103508164

版权

JavaScript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

Vuex

1 篇文章 0 订阅

订阅专栏

需要实现的场景

当 A页面除了返回上级页面以外，跳到其他页面均缓存A页面内容

实现思路

使用keep-alive的include属性，将需要缓存的页面加入include数组中
使用vuex保存需要缓存的页面集合
在页面跳转时使用导航守卫判断路由跳转页面
调用vux中的方法修改include集合

代码实现如下

App.vue

<template>
  <keep-alive :include="keepAlive" >
    <router-view/>
  </keep-alive>
</template>
<script>
  export default {
    data() {
      return {}
    },
    computed: {
      keepAlive() {
        return this.$store.state.keepAlive.join(',')
      }
    }
  }
</script>

Store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    keepAlive: []
  },
  mutations: {
    onKeepAlive (state, keepAlive) {
      state.keepAlive = keepAlive
    }
  },
   actions: {
    onKeepAlive ({ commit }, keepAlive) {
      commit('onKeepAlive', keepAlive)
    }
  }
})

A.vue

beforeRouteLeave(to, from, next) {
   if (to.path.indexOf('B') == -1) {
        this.$store.dispatch('onKeepAlive', ['A'])
    }
    next()
}
//判断跳转路由是否为B，为B不缓存，其他页面均缓存A页面