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>

标签：缓存,return,alive,keep,点击,vue,关闭,document,页面
来源： https://www.cnblogs.com/lyt0207/p/16543867.html