VUE中使用keep-alive缓存，本人遇到的问题#tooltip#el-dialog

keep-alive作用：

用来缓存的内置组件，避免多次加载相同的组建，减少性能消耗。

问题产生前景：

列表查询之后，切换路由会刷新页面内容，导致之前搜索的结果没有了或填写了一半的表单直接没有了，为了解决这一系列问题，使用了keep-alive组件来实现页面缓存。

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

问题产生简述：

由于在开发系统中会使用到token，当token鉴权失效之后会自动跳转登录页面；如果在token失效之前，页面中存在dialog、tooltip等，此时页面已经被keep-alive缓存，而dialog、tooltip等页面的层级相比其他页面来说会比较高，token鉴权失效跳转到登陆页面就会出现以下情况：

 问题解决：

keep-alive组件提供了两个属性include、exclude；其中include可用于记录我们缓存的页面，此次问题主要也是运用了属性include，接下来直接上代码吧！！！

<template>
  <div id="app">
    <keep-alive :include="include">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    include: [],
  }),
  watch: {
    $route(to, oldval) {
      this.include.push(to.name);
      if ("login".indexOf(to.name) != -1) {
        this.include = [];
      }
    },
  },
};
</script>

只需要在token鉴权失效之后，清空keep-alive缓存即可解决该问题！！！

总结：

以上是个人在工作中遇到的一些小问题，只做记录和提供自己的解决方法。你们还有别的解决办法吗？请在评论区多多指教！！！