配合vue-router，可以配置meta中的keep-alive解决这个问题：

• 在vue-router的配置中，添加（keepAlive: true）

  {
    path: '/HelloWorld',
    name: 'HelloWorld',
    component: HelloWorld,
    meta: { requireAuth: true, keepAlive: true },
  },

• 在app.vue中，根据路由中的keepAlive字段动态使用keep-alive标签，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

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

keep-alive 介绍：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

 这样在路由配置的时候，对需要缓存的路由组件设置keepAlive: true，组件就会被缓存下来了