keep-alive在element-admin中不生效问题解决

前言

之前做后台管理系统的项目，有大量的表单提交页面，但在实际操作场景中，有些使用者在编辑一个表单时，已经填写了部分信息，在未提交的情况下离开了表单提交页面，再返回时发现刚刚编辑了一半的表单信息被清空了，这个时候就产生了一个需求，在未提交的状态下离开页面，需要保留原数据不被销毁，无疑需要做一个缓存，于是想到了keep-alive。
按正常的流程，在路由中给需要保留缓存的页面一个标识，代码如下：

export default new Router({
  routes: [
    {
      path: '/helloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Demo1',
      meta: {
        keepAlive: true // 给需要缓存的页面设置此属性，以此为flag
      },
      component: Demo1
    },
  ]
})

然后在App.vue文件中添加keep-alive标签，做好判断：

<template>
  <div id="app">
    {{$route.meta.keepAlive}}
    <keep-alive>
    	<router-view v-if="$route.meta.keepAlive" /> // 需要缓存的页面
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" /> // 不需要缓存的页面
  </div>
</template>

<script>
export default {
  name: 'App',

  mounted () {
  }
}
</script>

问题来了，在其他框架里顺风顺水的流程，但是在element-admin中却不起作用了，排查之后，解决方案为将keep-alive的判断标签放入AppMain.vue中，就可以生效了。希望你们在遇到相同问题的时候可以帮到大家。