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中,就可以生效了。希望你们在遇到相同问题的时候可以帮到大家。

你可能感兴趣的:(vue,keep-alive)