【Vue 踩坑】解决Vue组件返回刷新的问题

使用<keep-alive>解决Vue组件返回刷新问题，下面是我的使用心得。
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
首先，在app.vue中修改如下代码

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

然后，就是给路由设置keepAlive属性值，通过keepAlive属性的布尔值来决定页面要不要返回刷新

 // 以医院列表为例
    {
      path: '/hospital_list',
      name: 'hospital_list',
      component: hospital_list,
      meta: {
        keepAlive: true
      }
    },

这样就解决了Vue中组件返回自动刷新的问题。