vue keep-alive即使关闭页面第二次打开依旧用的是第一次的缓存

本文主要是介绍vue keep-alive即使关闭页面第二次打开依旧用的是第一次的缓存，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

需求：页面A选择查询条件，然后点击去其他页面，希望再次点击A页面的时候依旧缓存上次的查询条件，直到点击 x 关闭缓存失效，再次点击左侧菜单打开A页面的时候重新请求数据，但是目前是再次点击左侧菜单打开A页面的时候依旧使用的关闭之前的缓存，为什么缓存一直存在呢？现在就来看看如何解决这个问题

解决：

在 AppMain页面我们看到了这样的代码，这种写法会使的缓存一直存在，缓存池应该是动态添加的，关闭的时候再从缓存池中清除该组件。

··

<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <!-- <li @click="refreshSelectedTag(selectedTag)">刷新</li> -->
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
      <li @click="closeOthersTags">关闭其他</li>
      <!-- <li @click="closeAllTags(selectedTag)">Close All</li> -->
    </ul>
  </div>
</template>

<script>
import ScrollPane from './ScrollPane'
import path from 'path'

export default {
  components: { ScrollPane },
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      affixTags: []
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
    routes() {
      return this.$store.state.permission.routers
    }
  },
  watch: {
    $route() {
      this.addTags()
      this.moveToCurrentTag()
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    visitedViews(list) {
      const wrapper = document.querySelectorAll('.el-icon-close')[0]
      if (list.length && list.length == 1) {
        this.$nextTick(() => {
          document.querySelectorAll('.el-icon-close')[0].classList.add('none')
        })
      } else {
        wrapper.classList.contains('none') && wrapper.classList.remove('none')
      }
    }

  },
  mounted() {this.addTags()
  },
  methods: {
    addTags() {
      const { name } = this.$route
      if (name) {
        this.$store.dispatch('tagsView/addView', this.$route)
      }
      return false
    },
    
  }
}
</script>

这篇关于vue keep-alive即使关闭页面第二次打开依旧用的是第一次的缓存的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！