vue2 & vue3 router keepalive 的使

vue2 router keep-alive的使用

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

const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
            keepAlive: true,
        }
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/About.vue')
    }
]

• 通过vueRouter 的meta 存放 keepAlive 状态
• 在router-view的页面 去判断是否需要keep-alive 来缓存组件

vue3 router keep-alive的使用

  <router-view v-slot="{ Component }">
    <keep-alive include="Home,About">
      <component class="view" :is="Component" />
    </keep-alive>
  </router-view>

• 通过 include 或者exclude 去筛选 需要keep-alive的组件名