标签：缓存 return alive keep 点击 vue 关闭 document 页面

需求：页面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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。