vue——keep-alive的使用 tab切换

keep-alive在动态组件 & 异步组件的使用

(vue 官网API)

当在多个组件之间来回切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。可以使用keep-alive。

（keep-alive详解）

eg：
路由中使用keep-alive，2个tabs的切换，

<div
          class="cont-tab"
          v-for="item in tabs"
          :key="item.id"
          :class="activeName === item.value ? 'active' : ''"
          @click="handleClick(item.value)"
        >
          {{ item.title }}
</div>




 data() {
    return {
      activeName: 'first',
      first: '',
      index: 1,
      tabs: [
        {
          title: '在线调试',
          value: 'first',
          id: 1
        },
        {
          title: '调试记录',
          value: 'second',
          id: 2
        }
      ]
    };
  },

//把是一个页面的路由存起来，
handleClick(tab) {
      this.activeName = tab;
      if (tab == 'first') {
        let routeName = localStorage.getItem('routeName');
        console.log(routeName);
        this.$router.push(routeName);
      } else if (tab == 'second') {
        console.log(this.$route.path);
        if (this.$route.path != '/recordsPage') {
          localStorage.setItem('routeName', this.$route.path);
        }
        this.$router.push('/recordsPage');
      }
    }

layout.js

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

route.js
路由里面加 keepAlive:true  
export const route = [
  {
    path: '/recordsPage',
    name: 'recordsPage',
    component: () => import('@/views/recordsPage/index.vue'),
    meta: { title: 'tabs2', icon: 'table', keepAlive:false  }
  },
  {
    path: '/debugPage',
    name: 'debugPage',
    component: () => import('@/views/debugPage/index.vue'),
    meta: { title: 'tabs1', icon: 'table' , keepAlive:true }
  },
  {
    path: '/templatePage',
    name: 'templatePage',
    component: () => import('@/views/templatePage/index.vue'),
    meta: { title: '页面B', icon: 'table', keepAlive:true }
  },
  {
    path: '/testPage',
    name: 'testPage',
    component: () => import('@/views/testPage/index.vue'),
    meta: { title: '页面C', icon: 'table', keepAlive:true }
  },
];

但是这样写会有一个注意⚠️的地方就是，route.js里面及格页面都加了 keepAlive:true，当我在页面A修改了一些数据，路由跳转懂啊页面B。再从页面B返回是一个页面A时，修改的页面A得数据是缓存了
**如果不想缓存页面A修改的数据可以使用keep-alive里面的属性，
include：只有名称匹配的组件会被缓存。
exclue：任何名称匹配的组件都不会被缓存。
注意⚠️: include/exclude 值是组件中的 name 命名，而不是路由中的组件 name 命名；
**