动态改变组件的keepAlive的值

keepAlive的作用还是很大的，虽然在之前的总结中有说避开使用keepAlive,但是在app端的表单页面难免会有跳转到其他页面进行选择然后再返回到表单页面，虽然通过主子路由的方式，但是页面返回后表单并没有保存填过的信息。

首先在app.vue根组件中，

1
2
3
4
5
6
7
8
<template v-if="$route.meta.keepAlive">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>
<template v-else>
  <router-view></router-view>
</template>

是渲染组件（可以理解为此处是你的a.vue, b.vue等等），所以不难理解，若是组件在路由中定义时加上了keepAlive并且为true的情况下，那么该组件有将引入的keep-alive组件。

在路由文件中这么写：

1
2
3
4
5
6
{
  name: 'create',
  path: '/create',
  meta: {title: '会议详情', keepAlive: true},
  component: resolve => {require.ensure(['../pages/create.vue'], () => {resolve(require('../pages/create.vue'))})}
},

在meta对象中添加keepAlive属性为true。

通常情况下查看详情页和创建页面为一个，某些操作隐藏掉而已，所以会遇到一个问题，从列表页查看详情的时候，因为该页面添加了keep-alive组件，所以详情页并不会重新渲染，无论点击哪条进来详情都是第一页的内容。

那么既然是路由中设置了keepAlive属性的问题，那就看看能不能动态改变。那么在进入创建页面的时候也就是离开上一个页面的时候能不能改变create页面的keepAlive属性呢。

所以就在创建的页面之前的页面使用路由钩子函数这样处理：

1
2
3
4
5
6
beforeRouteLeave (to, from, next) {
  if(this.isKeep) {
    to.meta.keepAlive = true
  } else to.meta.keepAlive = false
  next()
}

那到底是什么原因添加了keep-alive组件之后，组件将不会渲染，也只能用路由钩子函数来改变吗？所以又尝试了一下，那么每个组件都有生命周期函数，created、mounted、activated、distroyed，那么页面第一次进来的时候，created、mounted、activated都将打印，但是当第二次在进到创建页面的时候created、mounted钩子函数并没有执行，但是执行了activated钩子函数，所以说除了上边的处理方式以外，我们还可以将页面初始化的函数放在activated一份。

如果你有什么更好的方法或者文章有不正确的内容，很开心能跟你交流，QQ:39004003 [笑脸]