keep-alive、router-view

当keep-alive存在时， activated，deactivated才会被调用；
默认情况下，当路由(浏览器url)改变时，改变前的路由 所映射的组件(假设是组件A) 会被销毁(destroyed回调)，组件A 的data中保存的变量都会被销毁；但是当有keep-alive时，组件A 不会被销毁，只会调用deactivated，所以组件A 的data中保存的变量和值都被缓存了，再次回到组件A时，会执行activated，而不会执行created，之前保存的data值也没改变；
注意：假设 路由A对应组件A，路由B对应组件B，从 路由A 跳到 路由B 时，vue会先执行组件B的 created方法，再执行组件A的 destroyed方法；而且在 组件A的 destroyed方法 中获取的 this.$route.path(当前活跃路由的path) 已经是 路由B的path 了。

有的情况下，我们希望一些组件被缓存，一些组件不被缓存，有两种实现方式：
方式一：

<template>
  <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>
</template>

  {
    path: "/comRegistered",
    name: "comRegistered",
    component: () => import("@/views/companyApply/comRegistered.vue"),
  },
  {
    path: "/comInformation",
    name: "comInformation",
    component: () => import("@/views/companyApply/comInformation.vue"),
    meta: {keepAlive:false},
  },
  {
    path: "/uploadPicture",
    name: "uploadPicture",
    component: () => import("@/views/companyApply/uploadPicture.vue"),
    meta: {keepAlive:true},
  },

方式二：

<template>
  <div id="app">
  // 注意：home,user之间不能有空格；home,user是组件的name
  // home,user就不会被缓存了
    <keep-alive exclude="home,user">
    <!-- 路由匹配到的组件将显示在这里 -->
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
    name: 'home'
}
</script>

<script>
export default {
    name: 'user'
}
</script>