vue keepAlive 按需选择

路由里一定要加meta

{
          path: "/xxx",
          name: "xxx",
          component: xxx
          meta: {
            title: "xx",
          }
        },

页面里

     <transition
        mode="out-in"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <keep-alive>
          <router-view
            style="animation-duration: 200ms;"
            v-if="$route.meta.keepAlive"
          ></router-view>
        </keep-alive>
      </transition>
      <transition mode="out-in" enter-active-class="animated fadeIn" leave-active- 
         class="animated fadeOut">
         <router-view style="animation-duration: 200ms" v-if="!$route.meta.keepAlive"> 
         </router-view>
      </transition>

在进入页面的时候加上路由守卫

beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true //添加保留组件状态的语句
    next((vm) => {});
  },