Vue3 用keep-alive实现tab页缓存

一般国产味道的后台界面，都会有一个类似于浏览器tab标签的东西

大概就是这样的，可以点击标签切换不同的路由，并且不丢失之前录入的数据。

但是vue-router默认是不支持该操作，需要借助vue内置的keep-alive组件来解决

路由

路由需要设置name和meta两个属性，meta下加上一个keep属性，true表示当前路由需要缓存，false则不需要缓存

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/home',
      name: 'home',
      component: HomeView,
      meta: {
        keep:false
      }
    },
    {
      path: '/about',
      name: 'about',
      meta: {
        keep:true
      },
      component: () => import('../views/AboutView.vue')
    }
  ]
})

keep-alive使用

keep-alive需要放在router-view下，判断route的keepp属性，是否需要通过keep-alive缓存当前路由

<RouterView v-slot="{ Component }">
    <KeepAlive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keep"></component>
    </KeepAlive>
    <component :is="Component" :key="$route.name" v-if="!$route.meta.keep"></component>
  </RouterView>

使用

做完前面步骤，只需要正常按照vue的开发模式写业务逻辑，就可以实现tab路由缓存了。