keep-alive的使用-及遇到的问题

被keep-alive包括的的组件，当组件切换是不是走销毁流程，而是缓存起来

keep-alive有三个参数include匹配name名被缓存，exclude匹配name名不会被缓存，max被缓存组件数量

不写，组件默认全部缓存

<keep-alive >

      <router-view/>
</keep-alive>

 include匹配参数--name指的.vue组件内的name名

   
   数组方式匹配name

   <keep-alive :include="['HomeViewPage','AboutViewPage']">

      <router-view/>
   </keep-alive> -->

  


   ，分隔方式匹配name
   <keep-alive include="HomeViewPage,AboutViewPage">

      <router-view/>
   </keep-alive>

   

   正则方式匹配name
   <keep-alive :include="/HomeViewPage|AboutViewPage/">
      <router-view/>
   </keep-alive>

搭配路由使用-在meta中设置自定义键值对，命名推荐语义化，使用keepAlive

 {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: {
      keepAlive: true
    }
  }

 route是跳转的路由对象，里面有hash，meta，name，query等等，此处使用mate里我们设置keepAlive的值作为判断，因为v-if和v-else不能分开使用，使用两个v-if，如果是ture就使用包裹在keep-alive的路由出口，是false就使用未被包裹的路由出口，达到设置路由缓存

 <keep-alive>
      <router-view v-if=" $route.meta.keepAlive"/>
 </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

配合组件内的beforeRouteleave路由守卫来使用的话，可以达到如果是在编辑界面，或者新增界面，想切换界面却想缓存输入的部分内容，来提示编辑新增未完成，是否暂存内容，修改meta来达到效果

// 导航离开该组件的对应路由时调用
  beforeRouteLeave (to, from, next) {
    console.log(from.meta.keepAlive, 'hom')// 改变状态
    // from.meta.keepAlive = false
    next()
  }

被包裹的组件会多出两个生命周期钩子

在created和mounted之后

activated

在 keep-alive 组件激活时调用

该钩子函数在服务器端渲染期间不被调用

如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

deactivated

在 keep-alive 组件停用时调用

该钩子在服务器端渲染期间不被调用

=========================================================================

此处遇到问题

编辑新增未完成，是否暂存内容，表单内容缓存，但是点击提交之后再次进入，缓存信息仍然存在

提交完表单之后，下一次提交的时候，如何删除上一次缓存问题。

vue 支持 keep-alive 组件，如果启用，页面内的所有数据都会被保留，所以，上文的互动行为二后退时保留前一页数据继续操作没有问题。

问题出在互动行为一用户前进时总是进入新页面，然而一旦缓存，你就没法总是进新页面了，你总是进入缓存页，这就很让人头疼了。

官方提供了include和exclude特性，说你可以决定哪些页面使用缓存哪些页面不用缓存。链接

然而问题又回到了原点，并没有解决我们酌情决定是否使用已缓存的缓存这一需求。

所以很多人想到了一个方法在离开页面时销毁这个页面是不是就可以了，然而并不能，这里出现了 bug ，组件销毁了缓存还在

学习借鉴-这个是从根源解决问题-Vue 全站缓存之 keep-alive ： 动态移除缓存 - 阿星的空间

查阅其他得到方法

使用this.$router.go(0)也可以，但是页面会闪动白屏一下（好处简单一行代码搞定）

location.reload()

这种也是一样，画面一闪，效果总不是很好。

跳转空白页再跳回原页面

新建一个空白页面empty.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。
在需要刷新的页面添加

this.$router.replace({ path:'/empty' })

路由跳转

在空白页的created函数中添加路由跳转：

created(){
this.$router.replace({ path:'待刷新页面的path路径' })
}

这个方式，相比前两种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用

通过（组件守卫，来做判断，提交不缓存，离开其他情况进行缓存--）

// 导航离开该组件的对应路由时调用
  beforeRouteLeave (to, from, next) {
    console.log(from.meta.keepAlive, 'hom')// 改变状态
    // from.meta.keepAlive = false
    next()
  }